/* ===== شاشات buyer ===== */

/* ===== شريط المبلغ المحفوظ ===== */
.escrow-bar {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.escrow-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: var(--s3) }
.escrow-bar ol {
 display: grid;
 margin: 0;
 padding: 0;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: var(--s2);
 list-style: none }
.escrow-bar li {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: 2px }
.escrow-bar li::before {
 display: block;
 margin-bottom: var(--s2);
 border-radius: 2px;
 height: 4px;
 background: var(--border);
 content: '' }
.escrow-bar .label {
 font-size: var(--fs-14);
 color: var(--muted);
 overflow-wrap: anywhere }
.escrow-bar .sub {
 font-size: var(--fs-12);
 color: var(--muted) }
.escrow-bar li.done::before { background: var(--success) }
.escrow-bar li.done .label {
 font-weight: 600;
 color: var(--success) }
.escrow-bar li.now::before { background: var(--gold-200) }
.escrow-bar li.now .label {
 font-weight: 600;
 color: var(--gold-700) }
.escrow-bar li.held::before { background: var(--danger) }
.escrow-bar li.held .label {
 font-weight: 600;
 color: var(--danger) }
.escrow-note {
 margin: 0;
 font-size: var(--fs-14);
 color: var(--text-2) }
@media (max-width: 394px) {
 .escrow-bar .label { font-size: var(--fs-12) } }

/* ===== الشراء والدفع ===== */
.shop {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.shop .page-head { margin-bottom: 0 }
.shop .sec-title { margin: 0 }
.shop .m-bar-side {
 font-size: var(--fs-14);
 color: var(--muted);
 flex: none }
.ck-link {
 display: inline-flex;
 padding: 0;
 border: 0;
 min-height: 44px;
 font: inherit;
 font-weight: 600;
 color: var(--link);
 background: none;
 align-items: center;
 gap: var(--s1);
 cursor: pointer }
.ck-link:hover { text-decoration: underline }
.note-box {
 display: flex;
 padding: var(--s4);
 border: 1px solid var(--purple-200);
 border-radius: var(--r-md);
 font-size: var(--fs-14);
 color: var(--text);
 background: var(--purple-50);
 align-items: flex-start;
 gap: var(--s3) }
.note-box > .icon {
 color: var(--purple-700);
 flex: none }
.note-box.gold {
 border-color: var(--gold-200);
 background: var(--warning-bg) }
.note-box.gold > .icon { color: var(--gold-700) }
.center-text { text-align: center }
.big-money {
 font-size: var(--fs-20);
 font-weight: 700 }
.hint-line {
 margin: 0;
 font-size: var(--fs-12);
 color: var(--muted) }
.fading { opacity: 0.4 }
.cg {
 display: flex;
 padding: 0;
 flex-direction: column }
.cg-head {
 display: flex;
 padding: var(--s4);
 border-bottom: 1px solid var(--border);
 align-items: flex-start;
 justify-content: space-between;
 gap: var(--s3) }
.cg-head .avatar {
 border-radius: var(--r-xs);
 color: var(--purple-900);
 background: var(--gold-100) }
.cg-head .stack > a { color: var(--text) }
.cg-head .success-text {
 display: inline-flex;
 font-weight: 600;
 align-items: center;
 gap: 2px }
.cg-items > .ci { border-bottom: 1px solid var(--border) }
.cg-items > .ci:last-child { border-bottom: 0 }
.cg-foot {
 display: flex;
 padding: var(--s4);
 border-top: 1px solid var(--border);
 color: var(--text-2);
 align-items: center;
 justify-content: space-between }
.cg-foot b { color: var(--text) }
.ci {
 display: grid;
 position: relative;
 padding: var(--s4);
 grid-template-columns: 88px minmax(0, 1fr) auto;
 grid-template-areas: "img info info" "alert alert alert" "tiers tiers tiers" "qty qty total" "hint hint hint";
 gap: var(--s3) }
.ci-img { grid-area: img }
.ci-img .thumb, .ci-img .ph {
 border-radius: var(--r-sm);
 width: 88px;
 height: 88px }
.ci-info {
 display: flex;
 padding-inline-end: var(--s7);
 grid-area: info;
 flex-direction: column;
 align-items: flex-start;
 gap: 4px }
.ci-info > a { color: var(--text) }
.ci-del {
 position: absolute;
 top: var(--s3);
 left: var(--s3);
 color: var(--muted) }
.ci-unit { grid-area: unit }
.ci-alert { grid-area: alert }
.ci-tiers { grid-area: tiers }
.ci-tiers:empty, .ci-hint:empty { display: none }
.ci-qty {
 display: flex;
 grid-area: qty;
 flex-direction: column;
 align-items: flex-start;
 gap: 4px }
.ci-total {
 display: flex;
 grid-area: total;
 flex-direction: column;
 align-items: flex-end;
 justify-content: center;
 gap: 2px }
.ci-hint { grid-area: hint }
.ci .qty {
 border-radius: var(--r-sm);
 height: 56px }
.ci .qty button {
 width: 52px;
 height: 54px;
 background: var(--surface) }
.ci .qty button:disabled {
 color: var(--border-strong);
 cursor: default }
.ci .qty input {
 border-inline: 1px solid var(--border);
 width: 80px;
 height: 54px }
.ctiers {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--s2) }
.ctier {
 display: flex;
 padding: var(--s2);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 font-size: var(--fs-12);
 color: var(--muted);
 text-align: center;
 background: var(--surface);
 flex-direction: column;
 align-items: center;
 gap: 2px }
.ctier b, .ctier .money {
 font-size: var(--fs-14);
 color: var(--text) }
.ctier.on {
 border: 2px solid var(--purple-900);
 color: var(--purple-900);
 background: var(--purple-50) }
.un-row {
 display: flex;
 padding-top: var(--s3);
 border-top: 1px solid var(--border);
 flex-direction: column;
 gap: var(--s3) }
.un-row .row { flex-wrap: wrap }
.un-row .un-main {
 flex-wrap: nowrap;
 align-items: flex-start }
.un-row .thumb, .un-row .ph {
 width: 72px;
 height: 72px;
 opacity: 0.7 }
.cart-empty {
 display: flex;
 padding: var(--s7) var(--s5);
 text-align: center;
 flex-direction: column;
 align-items: center;
 gap: var(--s3) }
.cart-empty > .icon {
 width: 48px;
 height: 48px;
 color: var(--purple-500) }
.cart-empty h2 { font-size: var(--fs-20) }
.cart-empty p {
 margin: 0;
 max-width: 32rem;
 color: var(--text-2) }
.again {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: var(--s3) }
.again-card {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.again-card .thumb, .again-card .ph {
 width: 64px;
 height: 64px }
.ck-steps {
 display: grid;
 margin: 0;
 padding: 0;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: var(--s2);
 list-style: none }
.ck-steps li {
 font-size: var(--fs-14);
 color: var(--muted);
 text-align: start }
.ck-steps li::before {
 display: block;
 margin-bottom: var(--s2);
 border-radius: 2px;
 height: 4px;
 background: var(--border);
 content: '' }
.ck-steps li.done { color: var(--text) }
.ck-steps li.done::before, .ck-steps li.now::before { background: var(--purple-900) }
.ck-steps li.now {
 font-weight: 600;
 color: var(--purple-900) }
.ck-head { gap: var(--s1) }
.ck-head p { margin: 0 }
.ck-done .icon { color: var(--success) }
.ck-items {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.ck-items .row { align-items: flex-start }
.addr-pick {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: var(--s3) }
.addr-opt {
 padding: var(--s4);
 align-items: flex-start }
.addr-opt:has(input:checked) {
 border-width: 2px;
 background: var(--purple-50) }
.addr-opt input {
 margin-top: 4px;
 width: 20px;
 height: 20px }
.shop .field.has-addon input[dir="ltr"] {
 padding-right: var(--s4);
 padding-left: 76px }
.field .addon.num {
 display: flex;
 padding-inline-start: var(--s2);
 border-inline-start: 1px solid var(--border);
 height: 24px;
 font-weight: 600;
 color: var(--text);
 align-items: center }
.ck-switch {
 padding: var(--s1) 0;
 min-height: 44px }
.form-grid.three {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: var(--s4) }
.ck-code-form {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 align-items: start;
 gap: var(--s3) }
.ck-code-form .btn {
 min-width: 96px;
 height: 56px }
.ck-cards {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--s4) }
.ck-cards .card { gap: var(--s1) }
.ck-cards .ck-link { align-self: flex-start }
.ck-nav {
 align-items: center;
 gap: var(--s4) }
.pm-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: var(--s3) }
.pm {
 display: flex;
 padding: var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 min-height: 72px;
 background: var(--surface);
 align-items: center;
 gap: var(--s3);
 cursor: pointer }
.pm:has(input:checked) {
 border: 2px solid var(--purple-900);
 background: var(--purple-50) }
.pm input {
 width: 22px;
 height: 22px;
 flex: none;
 accent-color: var(--purple-900) }
.pm-logos {
 display: flex;
 flex: none;
 align-items: center;
 gap: var(--s1) }
.pm-logos img {
 border: 1px solid var(--border);
 border-radius: 6px;
 width: 56px;
 height: 32px;
 background: #FFFFFF;
 object-fit: contain }
.pm-logos .icon { color: var(--text) }
.amount-card { align-items: center }
.amount-card .muted { font-size: var(--fs-14) }
.card-addon {
 display: flex;
 align-items: center }
.card-addon img {
 border: 1px solid var(--border);
 border-radius: 4px;
 width: 40px;
 height: 24px;
 background: #FFFFFF;
 object-fit: contain }
.card-form .field input {
 text-align: left;
 direction: ltr }
.card-form .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.bank-rows {
 display: flex;
 flex-direction: column }
.bank-rows > div {
 display: grid;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 grid-template-columns: minmax(0, 1fr) auto;
 align-items: center;
 gap: 2px var(--s3) }
.bank-rows > div:last-child { border-bottom: 0 }
.bank-rows span {
 font-size: var(--fs-12);
 color: var(--muted);
 grid-column: 1 }
.bank-rows b {
 font-size: var(--fs-16);
 text-align: start;
 justify-self: start;
 grid-column: 1;
 overflow-wrap: anywhere }
.bank-rows .copy-btn {
 grid-column: 2;
 grid-row: 1 / span 2 }
.bank-rows .copy-btn span {
 font-size: var(--fs-14);
 color: inherit }
.bank .dropzone {
 border-color: var(--purple-300);
 color: var(--purple-700);
 background: var(--purple-50) }
.link-text { color: var(--link) }
.file-row {
 padding: var(--s3) var(--s4);
 align-items: center;
 gap: var(--s3) }
.file-row > .icon { color: var(--text) }
.stack-alert b, .stack-alert span { color: var(--text) }
.result { align-items: center }
.result > .m-bar { align-self: stretch }
.result-card {
 display: flex;
 width: 100%;
 max-width: 640px;
 flex-direction: column;
 gap: var(--s4) }
.result-head {
 display: flex;
 padding-top: var(--s5);
 text-align: center;
 flex-direction: column;
 align-items: center;
 gap: var(--s2) }
.result-head > .icon {
 width: 56px;
 height: 56px }
.result-head.success > .icon { color: var(--success) }
.result-head.danger > .icon { color: var(--danger) }
.result-head.gold > .icon { color: var(--gold-700) }
.result-head h1 { font-size: var(--fs-24) }
.result-head p { margin: 0 }
.result-actions {
 display: flex;
 margin-top: var(--s2);
 flex-direction: column;
 gap: var(--s3) }
.result .kv-rows .total .big { font-size: var(--fs-24) }
.multi {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: var(--s4) }
.multi .card { gap: var(--s3) }
.multi p { margin: 0 }
.escrow-bar.subs-w .sub { display: none }
@media (max-width: 766px) {
 body:has(.shop .m-bar) #hdr > :not(.m-side, .m-scrim) { display: none }
 body:has(.shop .m-actions) #bnav { display: none }
 body:has(.shop .m-bar) { padding-top: 0 }
 body:has(.shop .m-actions) main#app { padding-bottom: 0 }
 .shop.section { padding-top: 0 }
 .shop .m-actions.row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between }
 .shop .m-actions.ck-foot {
  flex-direction: row;
  align-items: center }
 .ck-foot .grow { flex: 1 }
 .ck-steps { margin-top: var(--s2) }
 .result-head { padding-top: var(--s6) }
 .result-actions .btn { width: 100% } }
@media (min-width: 767px) {
 body:has(.shop.ck) #hdr nav, body:has(.shop.ck) #hdr [data-search], body:has(.shop.ck) #hdr .actions, body:has(.shop.pay-page) #hdr [data-search] { display: none }
 .shop .page-head p { font-size: var(--fs-14) }
 .again { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .again-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between }
 .cg-head { padding: var(--s4) var(--s5) }
 .ci-head {
  display: grid;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-14);
  color: var(--text-2);
  background: var(--purple-50);
  grid-template-columns: 88px minmax(0, 1fr) 120px 200px 140px;
  gap: var(--s4) }
 .ci-head span:first-child { grid-column: span 2 }
 .ci-head span:last-child { text-align: end }
 .ci {
  padding: var(--s5);
  grid-template-columns: 88px minmax(0, 1fr) 120px 200px 140px;
  grid-template-areas: "img info unit qty total" "del . . . ." "alert alert alert alert alert" "tiers tiers tiers tiers tiers" "hint hint hint hint hint";
  column-gap: var(--s4);
  row-gap: var(--s3) }
 .ci-info { padding-inline-end: 0 }
 .ci-del {
  position: static;
  grid-area: del;
  justify-self: center }
 .ci-unit {
  display: flex;
  padding-top: var(--s4);
  flex-direction: column;
  align-items: flex-start }
 .ci-qty { align-items: flex-start }
 .ci-total {
  padding-top: var(--s4);
  justify-content: flex-start;
  align-items: flex-end }
 .ctiers {
  display: flex;
  flex-wrap: wrap;
  align-items: center }
 .ctiers-label {
  width: 100%;
  font-size: var(--fs-12);
  color: var(--muted) }
 .ctier {
  padding: var(--s2) var(--s3);
  flex-direction: row;
  gap: var(--s2) }
 .ctier.on { border-width: 1px }
 .cg-foot { padding: var(--s4) var(--s5) }
 .un-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between }
 .addr-pick { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 .form-grid.three .full { grid-column: 1 / -1 }
 .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .ck h1 { font-size: var(--fs-32) }
 .card-pay { align-items: center }
 .card-pay form {
  width: 100%;
  max-width: 780px }
 .result-card {
  padding: var(--s6) var(--s7);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface) }
 .result .result-card .card { box-shadow: none }
 .result-rows {
  padding: 0;
  border: 0 }
 .result-actions {
  flex-direction: row;
  justify-content: center }
 .result-head { padding-top: 0 }
 .result-head h1 { font-size: var(--fs-32) }
 .result-card:has(.multi) {
  padding: 0;
  border: 0;
  max-width: 920px;
  background: none }
 .multi { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .escrow-bar.subs-w .sub { display: block } }

/* ===== المحادثات والتفاوض ===== */
.wide-only, .wide-flex { display: none }
.narrow-only { display: inline }
.dash-main:has(.chat) > .dash-tabs, .dash-main:has(.proforma) > .dash-tabs { display: none }
.chat > * { min-height: 0 }
.chat-thread, .chat-msgs { min-height: 0 }
.chat-list {
 display: flex;
 flex-direction: column }
.chat-list-head {
 display: flex;
 padding: var(--s4);
 border-bottom: 1px solid var(--border);
 flex-direction: column;
 gap: var(--s3) }
.chat-list-head h2 {
 display: none;
 margin: 0;
 font-size: var(--fs-18) }
.chat-rows { flex: 1 }
.chat-rows > a {
 display: flex;
 padding: var(--s4);
 border-bottom: 1px solid var(--border);
 color: var(--text);
 align-items: flex-start;
 gap: var(--s3) }
.chat-rows > a:hover {
 background: var(--purple-50);
 text-decoration: none }
.chat-rows > a.on { background: var(--purple-50) }
.chat-rows .avatar, .chat-top .avatar {
 border: 1px solid var(--gold-200);
 border-radius: var(--r-sm);
 color: var(--purple-900);
 background: var(--gold-100) }
.chat-row-name {
 display: flex;
 min-width: 0;
 align-items: center;
 gap: var(--s2) }
.chat-row-name .status { font-size: var(--fs-14) }
.chat-row-ctx {
 font-size: var(--fs-14);
 color: var(--purple-700) }
.chat-row-last {
 font-size: var(--fs-14);
 color: var(--text-2) }
.chat-row-side {
 display: flex;
 flex: none;
 flex-direction: column;
 align-items: flex-end;
 gap: var(--s2) }
.chat-row-side .badge-count {
 position: static;
 color: #FFFFFF;
 background: var(--purple-900) }
.tick {
 display: inline-flex;
 color: var(--muted);
 align-items: center;
 gap: 2px }
.tick.read { color: var(--purple-700) }
.msg.mine .tick, .msg.mine .tick.read { color: inherit }
.read-label { display: none }
.chat-empty {
 display: flex;
 padding: var(--s7) var(--s4);
 min-height: 60vh;
 text-align: center;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: var(--s3) }
.chat-empty .icon { color: var(--purple-500) }
.chat-empty h3 { margin: 0 }
.chat-empty p {
 margin: 0;
 color: var(--text-2) }
.chat-empty .btn-outline {
 border-color: var(--purple-900);
 color: var(--purple-900) }
.chat-top {
 padding: var(--s3) var(--s4);
 background: var(--surface) }
.chat-who { min-width: 0 }
.chat-name {
 display: flex;
 min-width: 0;
 align-items: center;
 gap: var(--s2) }
.chat-ctx {
 font-size: var(--fs-14);
 color: var(--purple-700) }
.chat-ctx a { color: inherit }
.chat-ctx .status {
 font-size: var(--fs-14);
 color: var(--text) }
.chat-report {
 padding-inline: var(--s3);
 color: var(--text);
 flex: none }
.chat-stage {
 padding: var(--s3) var(--s4);
 border-bottom: 1px solid var(--border);
 background: var(--surface) }
.chat-msgs {
 background: var(--ivory);
 gap: var(--s3) }
.chat-day {
 font-size: var(--fs-12);
 color: var(--muted);
 align-self: center }
.msg-wrap {
 display: flex;
 max-width: 82%;
 flex-direction: column;
 align-items: flex-start;
 align-self: flex-start;
 gap: var(--s1) }
.msg-wrap.mine {
 align-items: flex-end;
 align-self: flex-end }
.msg-wrap.offer {
 width: 100%;
 max-width: min(380px, 92%) }
.msg-wrap .msg {
 padding: var(--s3) var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 max-width: 100%;
 box-shadow: none;
 align-self: auto }
.msg-wrap .msg.mine { border-color: var(--purple-900) }
.msg-wrap .msg.admin { border-color: var(--purple-900) }
.msg-wrap .msg.image { padding: var(--s2) }
.msg-wrap .msg.image.mine { border-width: 4px }
.msg.image img {
 display: block;
 margin: 0;
 border-radius: var(--r-sm);
 max-width: 100% }
.msg-body {
 white-space: pre-wrap;
 overflow-wrap: anywhere }
.msg .meta {
 display: flex;
 margin-top: var(--s1);
 font-size: var(--fs-12);
 align-items: center;
 gap: var(--s2) }
.msg-admin {
 display: flex;
 margin-bottom: var(--s1);
 font-size: var(--fs-14);
 font-weight: 600;
 color: var(--purple-900) }
.msg-sender {
 font-size: var(--fs-12);
 font-weight: 600;
 color: var(--text-2) }
.msg-file {
 display: flex;
 min-height: 44px;
 color: inherit;
 align-items: center;
 gap: var(--s3) }
.msg-file:hover { text-decoration: none }
.msg-file b {
 display: block;
 font-size: var(--fs-14);
 font-weight: 600;
 overflow-wrap: anywhere }
.msg-file .xs { display: block }
.msg.file:not(.mine) .msg-file > .icon:first-child { color: var(--danger) }
.msg[data-mid] { cursor: pointer }
.msg-wrap .msg-report {
 display: none;
 min-height: 44px;
 font-size: var(--fs-12);
 align-items: center;
 gap: var(--s1) }
.msg-wrap.show-actions .msg-report { display: inline-flex }
.msg.system {
 padding: var(--s1) var(--s3);
 border-radius: var(--r-full);
 font-size: var(--fs-12);
 color: var(--text-2);
 background: var(--border) }
.chat-guard {
 display: flex;
 padding: var(--s3) var(--s4);
 border: 1px solid var(--gold-200);
 border-radius: var(--r-md);
 font-size: var(--fs-14);
 background: var(--gold-100);
 align-items: flex-start;
 gap: var(--s2) }
.chat-guard .icon {
 color: var(--gold-700);
 flex: none }
.chat-guard + .chat-guard { display: none }
.chat-input {
 padding: var(--s3) var(--s4);
 background: var(--surface);
 align-items: center }
.chat-input textarea { border-radius: var(--r-md) }
.chat-offer-btn, .chat-send {
 padding: 0;
 width: 48px;
 flex: none }
.chat-offer-btn {
 border-color: transparent;
 color: var(--gold-600) }
.chat-side { display: none }
.chat.none { grid-template-columns: minmax(0, 1fr) }
.chat.none .chat-thread { display: none }
.chat.none .chat-list { border: 0 }
.offer-card {
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 width: 100%;
 max-width: none;
 background: var(--surface);
 overflow: hidden }
.offer-card.st-pending { border-color: var(--purple-300) }
.offer-card.flash { box-shadow: 0 0 0 4px var(--gold-100) }
.offer-head {
 display: flex;
 padding: var(--s3) var(--s4);
 border-bottom: 1px solid var(--border);
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.offer-head b { gap: var(--s2) }
.offer-head .icon { color: var(--gold-600) }
.offer-rows {
 margin: 0;
 padding: 0 var(--s4) }
.offer-rows > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 font-size: var(--fs-14);
 justify-content: space-between;
 gap: var(--s3) }
.offer-rows > div:last-child { border-bottom: 0 }
.offer-rows dt { color: var(--muted) }
.offer-rows dd {
 margin: 0;
 font-weight: 600;
 text-align: left }
.offer-rows .strong dt, .offer-rows .strong dd {
 font-weight: 700;
 color: var(--text) }
.offer-rows > div.wide-only { display: none }
.offer-card .prev {
 margin-inline-end: var(--s2);
 font-weight: 400;
 color: var(--muted) }
.offer-card.st-rejected dd, .offer-card.st-expired dd { color: var(--text-2) }
.offer-note {
 margin: 0;
 padding: 0 var(--s4) var(--s3);
 color: var(--text-2) }
.offer-foot {
 display: flex;
 padding: var(--s3) var(--s4);
 border-top: 1px solid var(--border);
 flex-direction: column;
 gap: var(--s3) }
.offer-foot.row {
 flex-direction: row;
 align-items: center }
.offer-foot p { margin: 0 }
.offer-due {
 display: flex;
 font-size: var(--fs-12);
 font-weight: 600;
 color: var(--gold-700);
 align-items: center;
 gap: var(--s2) }
.offer-due .icon { flex: none }
.offer-done {
 display: flex;
 font-size: var(--fs-14);
 align-items: center;
 gap: var(--s2) }
.offer-done .icon {
 color: var(--success);
 flex: none }
.offer-actions {
 display: flex;
 gap: var(--s2) }
.offer-actions .btn-primary { flex: 1 }
.offer-foot .btn-outline { align-self: flex-start }
.offer-form {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.offer-product {
 display: flex;
 padding: var(--s3);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 align-items: center;
 gap: var(--s3) }
.offer-product .thumb {
 border-radius: var(--r-sm);
 width: 56px;
 height: 56px;
 flex: none;
 overflow: hidden }
.offer-product b, .offer-product span { display: block }
.offer-layout {
 display: grid;
 gap: var(--s5) }
.validity {
 margin: 0;
 padding: 0;
 border: 0;
 min-width: 0 }
.validity legend {
 margin-bottom: var(--s2);
 font-weight: 600 }
.seg-group {
 display: grid;
 padding: var(--s1);
 border-radius: var(--r-sm);
 background: var(--purple-50);
 grid-auto-flow: column;
 grid-auto-columns: 1fr;
 gap: var(--s1) }
.seg {
 display: flex;
 position: relative }
.seg input {
 position: absolute;
 margin: 0;
 opacity: 0;
 inset: 0;
 cursor: pointer }
.seg span {
 display: flex;
 border-radius: 9px;
 width: 100%;
 min-height: 44px;
 font-weight: 600;
 color: var(--text-2);
 align-items: center;
 justify-content: center }
.seg input:checked + span {
 color: var(--accent-ink);
 background: var(--surface);
 box-shadow: var(--shadow-1) }
.seg input:focus-visible + span { outline: 2px solid var(--purple-700) }
.offer-preview {
 display: flex;
 flex-direction: column;
 gap: var(--s2) }
.offer-preview p { margin: 0 }
.offer-card.preview { border-style: dashed }
.addon-text {
 display: flex;
 padding-inline: var(--s2);
 height: 40px;
 font-size: var(--fs-14);
 color: var(--muted);
 align-items: center }
.riyal {
 display: inline-flex;
 padding-inline: var(--s2);
 height: 40px;
 color: var(--text);
 align-items: center }
.riyal svg {
 width: auto;
 height: 16px;
 fill: currentColor }
.report-form {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.report-form p { margin: 0 }
.radio-list {
 display: flex;
 flex-direction: column }
.radio-row {
 display: flex;
 padding: var(--s2) 0;
 border-bottom: 1px solid var(--border);
 min-height: 52px;
 align-items: center;
 gap: var(--s3);
 cursor: pointer }
.radio-row input {
 margin: 0;
 width: 22px;
 height: 22px;
 flex: none;
 accent-color: var(--purple-900) }
.plain-field {
 display: flex;
 flex-direction: column;
 gap: var(--s2) }
.plain-field textarea {
 padding: var(--s3) var(--s4);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-sm);
 min-height: 96px;
 font: inherit;
 color: var(--text);
 background: var(--surface);
 resize: vertical }
.plain-field textarea:focus {
 border-color: var(--purple-700);
 box-shadow: 0 0 0 4px var(--purple-100);
 outline: none }
.proforma {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.pf-bar {
 display: flex;
 align-items: center;
 gap: var(--s2) }
.pf-bar h1 {
 margin: 0;
 font-size: var(--fs-20);
 flex: 1 }
.pf-grid {
 display: grid;
 gap: var(--s4) }
.pf-doc {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.pf-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: var(--s3) }
.pf-head div {
 display: flex;
 flex-direction: column;
 align-items: flex-end }
.pf-meta {
 display: flex;
 font-size: var(--fs-14);
 flex-wrap: wrap;
 justify-content: space-between;
 gap: var(--s2) var(--s3) }
.pf-parties {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--s3) }
.pf-parties div {
 display: flex;
 flex-direction: column;
 gap: 2px }
.pf-table { display: none }
.pf-line {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 font-size: var(--fs-14);
 justify-content: space-between;
 gap: var(--s3) }
.pf-totals .offer-rows { padding: 0 }
.pf-totals .offer-rows > div.wide-row { display: none }
.pf-totals .strong dd, .pf-total { font-size: var(--fs-20) }
.pf-foot { margin: 0 }
.pf-pay { gap: var(--s4) }
.pf-pay h3 { margin: 0 }
.pf-sticky {
 display: flex;
 position: sticky;
 bottom: calc(var(--bottom-h) + var(--s2));
 padding: var(--s3) var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 text-align: center;
 background: var(--surface);
 box-shadow: var(--shadow-2);
 flex-direction: column;
 gap: var(--s2) }
.pf-sticky p { margin: 0 }
.pf-note {
 padding: var(--s3);
 border: 1px solid var(--purple-200);
 border-radius: var(--r-sm);
 font-size: var(--fs-14);
 background: var(--purple-50);
 align-items: flex-start;
 gap: var(--s2) }
.pf-note .icon {
 color: var(--purple-700);
 flex: none }
.pf-pay > .btn-ghost { align-self: center }
.btn-gold:hover { background: var(--gold-600) }
.narrow-flex {
 display: flex;
 justify-content: space-between;
 gap: var(--s3) }
.rfq-page {
 display: flex;
 position: relative;
 min-height: calc(100vh - var(--header-h));
 flex-direction: column }
.rfq-backdrop {
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 height: 320px;
 overflow: hidden }
.rfq-backdrop .rfq-cover {
 width: 100%;
 height: 100%;
 object-fit: cover }
.rfq-scrim {
 position: absolute;
 background: var(--overlay);
 inset: 0 }
.rfq-sheet {
 display: flex;
 position: relative;
 margin-top: 200px;
 padding: var(--s4) var(--s4) var(--s6);
 border-radius: var(--r-lg) var(--r-lg) 0 0;
 background: var(--surface);
 flex: 1;
 flex-direction: column;
 gap: var(--s5) }
.rfq-head {
 display: flex;
 align-items: flex-start;
 gap: var(--s3) }
.rfq-head h1 {
 margin: 0;
 font-size: var(--fs-24) }
.rfq-head p {
 display: block;
 margin: var(--s1) 0 0 }
.rfq-product {
 display: flex;
 padding: var(--s3);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 align-items: center;
 gap: var(--s3) }
.rfq-product .thumb, .rfq-product .ph {
 border-radius: var(--r-sm);
 width: 64px;
 height: 64px;
 flex: none;
 overflow: hidden }
.rfq-product .grow > b, .rfq-product .grow > .small { display: block }
.rfq-price {
 font-size: var(--fs-18);
 flex: none }
.rfq-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 grid-template-areas: 'qty qty' 'specs specs' 'files files' 'price price' 'date city' 'variant variant';
 gap: var(--s5) var(--s3) }
.plain-field > label { font-weight: 600 }
.plain-field input, .plain-field select {
 padding: 0 var(--s4);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-sm);
 width: 100%;
 min-height: 52px;
 font: inherit;
 color: var(--text);
 background: var(--surface);
 appearance: none }
.plain-field .day-input input { padding-left: 48px }
.plain-field input:focus, .plain-field select:focus {
 border-color: var(--purple-700);
 box-shadow: 0 0 0 4px var(--purple-100);
 outline: none }
.plain-field .hint {
 font-size: var(--fs-12);
 color: var(--muted) }
.plain-field .error {
 font-size: var(--fs-12);
 color: var(--danger) }
.plain-field.invalid > label { color: var(--danger) }
.plain-field.invalid input, .plain-field.invalid select, .plain-field.invalid textarea, .plain-field.invalid .qty { border-color: var(--danger) }
.rfq-qty-row {
 display: flex;
 align-items: center;
 gap: var(--s3) }
.rfq-stepper {
 border-radius: var(--r-sm);
 max-width: 280px;
 flex: 1 }
.rfq-stepper button {
 width: 64px;
 height: 52px;
 background: var(--surface) }
.rfq-stepper input {
 padding: 0;
 border: 0;
 border-inline: 1px solid var(--border);
 border-radius: 0;
 min-height: 52px;
 font-weight: 700;
 text-align: center;
 flex: 1 }
.rfq-money {
 display: flex;
 position: relative;
 align-items: center }
.rfq-money input { padding-left: 96px }
.rfq-suffix {
 display: flex;
 position: absolute;
 left: var(--s3);
 align-items: center;
 gap: var(--s1);
 pointer-events: none }
.rfq-suffix .riyal { padding: 0 }
.rfq-select { position: relative }
.rfq-select .icon {
 position: absolute;
 top: 18px;
 left: var(--s4);
 color: var(--muted);
 pointer-events: none }
.rfq-files {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.rfq-file {
 display: flex;
 padding: var(--s3) var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 align-items: center;
 gap: var(--s3) }
.rfq-file b, .rfq-file .xs {
 display: block;
 overflow-wrap: anywhere }
.rfq-file.bad { border-color: var(--danger) }
.rfq-file.bad .xs, .rfq-file.bad > .icon { color: var(--danger) }
.rfq-attach {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: var(--s2) }
.rfq-attach-btn {
 padding-inline: var(--s2);
 font-weight: 600 }
.rfq-foot {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.rfq-foot .btn-primary { width: 100% }
.rfq-estimate {
 padding: var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--purple-50) }
.rfq-estimate p { margin: var(--s2) 0 0 }
.rfq-estimate b { font-size: var(--fs-20) }
.rfq-note {
 margin: 0;
 text-align: center }
@media (min-width: 767px) {
 .modal:has(.report-form) .modal-foot, .modal:has(.offer-form) .modal-foot { justify-content: flex-start } }
@media (min-width: 1023px) {
 .wide-only, .read-label { display: inline }
 .wide-flex { display: flex }
 .narrow-only, .pf-sticky, .rfq-head p { display: none }
 .dash:has(.proforma) { grid-template-columns: minmax(0, 1fr) }
 .dash:has(.proforma) > .side { display: none }
 .dash:has(.chat):not(:has(.store-switch)) { grid-template-columns: minmax(0, 1fr) }
 .dash:has(.chat):not(:has(.store-switch)) > .side { display: none }
 .chat:not(.none) { grid-template-columns: 380px minmax(0, 1fr) }
 .chat-list-head h2 { display: block }
 .chat-back, .chat-stage, .pf-bar { display: none }
 .msg-wrap { max-width: 64% }
 .chat-guard {
  max-width: 560px;
  align-self: center }
 .msg-wrap:hover .msg-report { display: inline-flex }
 .chat-offer-btn, .chat-send {
  padding: 0 var(--s5);
  width: auto }
 .chat-offer-btn {
  border-color: var(--purple-900);
  color: var(--link) }
 .chat-offer-btn .icon, .chat-send .icon { display: none }
 .chat.dispute {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s5) }
 .chat.dispute .chat-list { display: none }
 .chat.dispute .chat-thread {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden }
 .chat.dispute .chat-side {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: var(--s4) }
 .chat-side .card { padding: var(--s5) }
 .chat-side h3 { margin: 0 }
 .chat-side .offer-rows { padding: 0 }
 .offer-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) }
 .offer-rows > div.wide-only { display: flex }
 .pf-grid {
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start }
 .pf-doc { padding: var(--s6) }
 .pf-table { display: block }
 .pf-lines { display: none }
 .pf-totals { width: 300px }
 .pf-totals .offer-rows > div.wide-row { display: flex }
 .pf-pay {
  position: sticky;
  top: calc(var(--header-h) + 16px) }
 .narrow-flex { display: none }
 .rfq-page {
  padding: var(--s6) var(--s4);
  flex-direction: row;
  align-items: flex-start;
  justify-content: center }
 .rfq-backdrop {
  height: auto;
  inset: 0 }
 .rfq-sheet {
  margin: 0;
  padding: var(--s6);
  border-radius: var(--r-lg);
  width: 640px;
  max-width: 100%;
  box-shadow: var(--shadow-2);
  flex: none;
  gap: var(--s4) }
 .rfq-head h1 { font-size: var(--fs-20) }
 .rfq-grid {
  grid-template-areas: 'qty price' 'date city' 'specs specs' 'files files' 'variant variant';
  gap: var(--s4) }
 .rfq-stepper { max-width: none }
 .rfq-stepper button { display: none }
 .rfq-stepper input {
  padding: 0 var(--s4);
  border: 0;
  text-align: right }
 .rfq-money input { padding-left: 48px }
 .rfq-files {
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-end }
 .rfq-attach-btn {
  border: 1px solid var(--purple-900);
  border-radius: var(--r-sm) }
 .rfq-foot {
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center }
 .rfq-foot [data-summary] {
  width: 100%;
  order: -1 }
 .rfq-foot [data-summary]:empty { display: none }
 .rfq-estimate {
  padding: 0;
  border: 0;
  background: none;
  flex: 1 }
 .rfq-estimate p { margin: 0 }
 .rfq-estimate b { font-size: inherit }
 .rfq-foot .btn-primary { width: auto } }

/* ===== لوحة المشتري ===== */
.tabs .count {
 margin-right: var(--s2);
 font-size: var(--fs-14);
 font-weight: 500 }
.m-bar, .m-actions { display: none }
.acc-full {
 padding-top: var(--s5);
 padding-bottom: var(--s6) }
.acc-full > .acc {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.acc .table .num, .acc .table time, .acc .table .money, .nw { white-space: nowrap }
.gold-text { color: var(--gold-700) }
.success-text { color: var(--success) }
.danger-text { color: var(--danger) }
.acc .link-btn {
 display: inline-flex;
 padding: 0;
 border: 0;
 min-height: 44px;
 font: inherit;
 font-weight: 600;
 color: var(--link);
 background: none;
 align-items: center;
 gap: var(--s1);
 cursor: pointer }
.acc .link-btn:hover { text-decoration: underline }
.link-btn.danger-text { color: var(--danger) }
.btn-danger-outline {
 border-color: var(--danger);
 color: var(--danger);
 background: var(--surface) }
.sec-title {
 font-size: var(--fs-20);
 font-weight: 600 }
.sec-label {
 margin-top: var(--s2);
 font-size: var(--fs-14);
 font-weight: 600;
 color: var(--text-2) }
.big {
 font-size: var(--fs-24);
 font-weight: 700 }
.row.center { justify-content: center }
.row.two > * { flex: 1 }
.tag-outline {
 display: inline-flex;
 padding: 2px var(--s2);
 border: 1px solid var(--purple-300);
 border-radius: var(--r-xs);
 font-size: var(--fs-12);
 font-weight: 600;
 color: var(--link) }
.stats {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--s3) }
.stat {
 display: flex;
 padding: var(--s4);
 flex-direction: column;
 gap: var(--s2) }
.stat .label {
 font-size: var(--fs-14);
 color: var(--text-2) }
.stat .value {
 font-size: var(--fs-24);
 font-weight: 700;
 line-height: 1.2 }
.stat .sub {
 font-size: var(--fs-12);
 color: var(--muted) }
.menu-list > a {
 display: flex;
 padding: var(--s3) var(--s4);
 border-bottom: 1px solid var(--border);
 min-height: 56px;
 color: var(--text);
 align-items: center;
 gap: var(--s3) }
.menu-list > a:last-child { border-bottom: 0 }
.menu-list > a:hover {
 background: var(--purple-50);
 text-decoration: none }
.menu-list > a > .icon:first-child { color: var(--purple-700) }
.menu-list > a > .icon:last-child { color: var(--muted) }
.menu-list > a .grow {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: 2px }
.menu-list .end, .o-mini .end {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: var(--s2);
 flex: none }
.upgrade-card {
 padding: var(--s4);
 color: var(--text);
 gap: var(--s3) }
.upgrade-card:hover { text-decoration: none }
.upgrade-card > .icon:first-child { color: var(--purple-700) }
.upgrade-card .grow {
 display: flex;
 flex-direction: column;
 gap: 2px }
.logout-btn { align-self: center }
.profile-row {
 align-items: center;
 gap: var(--s3) }
.profile-row .grow, .profile-card .grow {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: 2px }
.profile-card {
 padding: var(--s4);
 gap: var(--s3) }

/* ===== لوحة المشتري: نظرة عامة ===== */
.needs .acts {
 display: flex;
 flex-direction: column }
.act {
 display: grid;
 padding: var(--s4);
 border-bottom: 1px solid var(--border);
 gap: var(--s2) }
.act:last-child { border-bottom: 0 }
.act-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: var(--s2) }
.act-head .status {
 min-width: 0;
 white-space: normal }
.act-body {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: var(--s1) }
.act-body p {
 margin: 0;
 line-height: 1.7 }
.act-side {
 display: flex;
 align-items: center;
 gap: var(--s3) }
.act-side .act-btn-w { display: none }
.act .btn-gold.act-btn { width: 100% }
.o-mini > a {
 display: flex;
 padding: var(--s4);
 color: var(--text);
 align-items: flex-start;
 gap: var(--s3) }
.o-mini > a:hover { text-decoration: none }
.o-mini .grow {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: 2px }

/* ===== لوحة المشتري: الطلبات ===== */
.o-cards {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.o-card {
 display: flex;
 padding: var(--s4);
 color: var(--text);
 flex-direction: column;
 gap: var(--s3) }
.o-card:hover { text-decoration: none }
.o-prod {
 align-items: center;
 gap: var(--s3) }
.o-prod .thumb {
 border: 1px solid var(--border);
 width: 56px;
 height: 56px }
.o-prod .grow {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: 2px }
.o-total { font-size: var(--fs-20) }

/* ===== لوحة المشتري: تفاصيل الطلب ===== */
.od {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.od-main, .od-side { gap: var(--s4) }
.kv-rows {
 display: flex;
 flex-direction: column }
.kv-rows > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 min-height: 44px;
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.kv-rows > div:last-child { border-bottom: 0 }
.kv-rows > div > span:first-child { color: var(--text-2) }
.kv-rows > div > b { text-align: end }
.kv-rows .total { padding-top: var(--s4) }
.od-prod .o-prod .thumb {
 width: 64px;
 height: 64px }
.o-prod a { color: inherit }
.od-status p { margin: 0 }
.note-line { align-items: flex-start }
.sq-line {
 display: flex;
 flex-direction: column }
.sq-line > div {
 display: flex;
 position: relative;
 padding: 0 var(--s6) var(--s5) 0;
 flex-direction: column;
 gap: 2px }
.sq-line > div::before {
 position: absolute;
 top: 4px;
 right: 2px;
 border-radius: 3px;
 width: 14px;
 height: 14px;
 background: var(--success);
 content: '' }
.sq-line > div::after {
 position: absolute;
 top: 22px;
 right: 8px;
 bottom: 2px;
 width: 1px;
 background: var(--border-strong);
 content: '' }
.sq-line > div:last-child { padding-bottom: 0 }
.sq-line > div:last-child::after { display: none }
.sq-line > div.now::before {
 border: 2px solid var(--gold-500);
 background: var(--surface) }
.sq-line > div:not(.done):not(.now)::before {
 border: 2px solid var(--cancelled);
 background: var(--surface) }
.sq-line .row { flex-wrap: wrap }
.pay-logo {
 border: 1px solid var(--border);
 border-radius: 6px;
 width: 40px;
 height: 24px;
 background: #FFFFFF;
 object-fit: contain }
.sq-checks .check {
 min-height: 44px;
 align-items: center }
.sq-checks .check input {
 margin: 0;
 width: 20px;
 height: 20px;
 accent-color: var(--gold-600) }
.uploads .u.add {
 display: flex;
 border: 1px dashed var(--purple-300);
 color: var(--purple-700);
 background: var(--purple-50);
 align-items: center;
 justify-content: center;
 cursor: pointer }
.uploads .u .ph {
 display: flex;
 width: 100%;
 height: 100%;
 color: var(--muted);
 align-items: center;
 justify-content: center }
.od-links { gap: var(--s3) }
.rate-stars {
 display: flex;
 color: var(--gold-500);
 gap: var(--s2) }
.rate-stars a, .rate-stars button, .rate-stars span {
 display: inline-flex;
 padding: 0;
 border: 0;
 min-width: 44px;
 min-height: 44px;
 color: var(--gold-500);
 background: none;
 align-items: center;
 justify-content: center;
 cursor: pointer }
.rate-stars .icon {
 width: 32px;
 height: 32px;
 stroke: currentColor }
.rate-stars:hover a { color: var(--gold-500) }
.rate-stars:hover a .icon { fill: currentColor }
.rate-stars .on { color: var(--gold-500) }
.rate-stars .on .icon { fill: currentColor }
.rate-stars a:hover ~ a .icon { fill: none }
.rate-stars.ro span { cursor: default }
.od-rate .rate-stars .icon, .rate-stars.lg .icon {
 width: 40px;
 height: 40px }

/* ===== لوحة المشتري: النزاع والتقييم ===== */
.chips-pick, .seg-pick {
 display: flex;
 flex-wrap: wrap;
 gap: var(--s2) }
.chips-pick label {
 position: relative;
 cursor: pointer }
.chips-pick input, .seg-pick input {
 position: absolute;
 opacity: 0;
 pointer-events: none }
.chips-pick span {
 display: inline-flex;
 padding: 0 var(--s4);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-full);
 min-height: 44px;
 font-weight: 500;
 color: var(--text);
 background: var(--surface);
 align-items: center }
.chips-pick input:checked + span {
 border-color: var(--purple-300);
 color: var(--accent-ink);
 background: var(--purple-100) }
.chips-pick input:focus-visible + span, .seg-pick input:focus-visible + span {
 outline: 2px solid var(--purple-500);
 outline-offset: 2px }
.seg-pick {
 padding: var(--s1);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 background: var(--purple-50);
 flex-wrap: nowrap }
.seg-pick label {
 position: relative;
 min-width: 0;
 flex: 1;
 cursor: pointer }
.seg-pick span {
 display: flex;
 padding: 0 var(--s2);
 border-radius: 10px;
 min-height: 44px;
 font-size: var(--fs-14);
 font-weight: 500;
 color: var(--text-2);
 white-space: nowrap;
 align-items: center;
 justify-content: center }
.seg-pick input:checked + span {
 font-weight: 700;
 color: var(--accent-ink);
 background: var(--surface);
 box-shadow: var(--shadow-1) }
.dispute-form fieldset {
 margin: 0;
 padding: 0;
 border: 0 }
.dispute-form legend { margin-bottom: var(--s2) }
.dispute-form .error {
 font-size: var(--fs-14);
 color: var(--danger) }
.dsp { align-items: start }
.team-msg {
 display: flex;
 flex-direction: column;
 gap: var(--s1) }
.team-msg b { color: var(--link) }
.team-msg p { margin: 0 }
.rate-page {
 margin-inline: auto;
 width: 100%;
 max-width: 640px }
.rate-who {
 align-items: center;
 gap: var(--s3) }
.rate-who .grow {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: 2px }
.rate-main {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--s2) }
.rate-sub {
 display: flex;
 padding-block: 0;
 flex-direction: column }
.rate-row {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 align-items: center;
 justify-content: space-between;
 gap: var(--s2) }
.rate-row:last-child { border-bottom: 0 }
.rate-row .rate-stars { gap: 0 }
.rate-row .rate-stars .icon {
 width: 28px;
 height: 28px }
.grade { min-height: 1.5em }
.plain-area, .plain-input {
 padding: var(--s3) var(--s4);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-md);
 width: 100%;
 font: inherit;
 color: var(--text);
 background: var(--surface) }
.plain-area { resize: vertical }

/* ===== لوحة المشتري: المدفوعات والأكواد ===== */
.pay-cards {
 display: flex;
 padding-block: 0;
 flex-direction: column }
.pay-row {
 display: flex;
 padding: var(--s4) 0;
 border-bottom: 1px solid var(--border);
 flex-direction: column;
 gap: var(--s2) }
.pay-row:last-child { border-bottom: 0 }
.pay-row .link-btn { align-self: flex-start }
.code-wrap { max-width: 640px }
.code-row { align-items: stretch }
.code-row .plain-input {
 min-width: 0;
 min-height: 52px;
 text-align: start;
 flex: 1 }
.code-row .btn { min-width: 96px }
.code-form.ok .plain-input { border-color: var(--success) }
.code-form.bad .plain-input { border-color: var(--danger) }
.code-form .error {
 font-size: var(--fs-14);
 color: var(--danger) }

/* ===== لوحة المشتري: الإعدادات والعناوين ===== */
.prefs td:not(:first-child), .prefs th:not(:first-child) { text-align: center }
.pref-list {
 display: flex;
 padding-block: var(--s2);
 flex-direction: column }
.pref-item {
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 min-height: 56px;
 cursor: pointer }
.pref-list p { margin: var(--s2) 0 0 }
.sessions { gap: var(--s3) }
.acc-two {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: var(--s4) }
.phone-box {
 display: flex;
 flex-direction: column;
 gap: var(--s1) }
.addr-list {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.addr-card { gap: var(--s2) }
.link-row { gap: var(--s4) }
.addr-form .addon.prefix {
 display: flex;
 padding-inline: var(--s3);
 border-inline-end: 1px solid var(--border);
 font-weight: 600;
 color: var(--text);
 align-items: center }
.addr-form .has-addon input { padding-inline-end: 80px }

/* ===== لوحة المشتري: المفضلة والإشعارات ===== */
.fav-list {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.fav-row {
 display: flex;
 padding: var(--s3);
 color: var(--text);
 align-items: center;
 gap: var(--s3) }
.fav-row:hover { text-decoration: none }
.fav-row .grow {
 min-width: 0;
 gap: var(--s1) }
.fav-row .fav-img {
 border-radius: var(--r-sm);
 width: 88px;
 height: 88px;
 background: var(--surface-2);
 object-fit: cover;
 flex: none }
.fav-row .fav {
 color: var(--purple-900);
 align-self: flex-start }
.fav-row .fav.on .icon { fill: currentColor }
.chip-tabs {
 display: flex;
 padding-bottom: var(--s1);
 gap: var(--s2);
 overflow-x: auto;
 scrollbar-width: none }
.chip-tabs button {
 padding: 0 var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-full);
 min-height: 44px;
 font: inherit;
 font-weight: 600;
 color: var(--text);
 background: var(--surface);
 white-space: nowrap;
 cursor: pointer }
.chip-tabs button.on {
 border-color: var(--purple-300);
 color: var(--accent-ink);
 background: var(--purple-100) }
.note-groups {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.note-groups .day {
 margin-bottom: var(--s2);
 font-size: var(--fs-14);
 font-weight: 600;
 color: var(--text-2) }
.note {
 display: flex;
 padding: var(--s4);
 border: 0;
 border-bottom: 1px solid var(--border);
 width: 100%;
 font: inherit;
 color: inherit;
 text-align: start;
 background: none;
 align-items: flex-start;
 gap: var(--s3);
 cursor: pointer }
.note:last-child { border-bottom: 0 }
.note .icon {
 margin-top: 2px;
 color: var(--purple-700);
 flex: none }
.note .grow {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: var(--s1) }
.note.unread { background: var(--purple-50) }
.note .dot {
 margin-top: 8px;
 border-radius: 3px;
 width: 10px;
 height: 10px;
 background: var(--purple-900);
 flex: none }

/* ===== لوحة المشتري: الترقية لمورد ===== */
.up-hero {
 display: flex;
 position: relative;
 padding: var(--s6) var(--s5);
 border-radius: var(--r-lg);
 color: #FFFFFF;
 background: var(--purple-900);
 flex-direction: column;
 gap: var(--s3);
 overflow: hidden }
.up-hero::before {
 position: absolute;
 background: url('/assets/pattern/pattern.png') center / 520px repeat;
 opacity: 0.35;
 inset: 0;
 content: '' }
.up-hero > * { position: relative }
.up-hero h1 { font-size: var(--fs-32) }
.up-hero p {
 margin: 0;
 color: var(--purple-200);
 line-height: 1.7 }
.up-cta {
 color: var(--purple-900);
 background: #FFFFFF;
 align-self: flex-start }
.up-steps {
 display: flex;
 margin: 0;
 padding-block: var(--s2);
 flex-direction: column;
 list-style: none }
.up-steps li {
 display: flex;
 padding: var(--s4) 0;
 border-bottom: 1px solid var(--border);
 gap: var(--s4) }
.up-steps li:last-child { border-bottom: 0 }
.up-steps .n {
 font-size: var(--fs-20);
 font-weight: 700;
 color: var(--gold-700) }
.sq-list {
 display: flex;
 margin: 0;
 padding: 0;
 flex-direction: column;
 gap: var(--s3);
 list-style: none }
.sq-list li {
 display: flex;
 align-items: center;
 gap: var(--s3) }
.sq-list li::before {
 border: 2px solid var(--gold-500);
 border-radius: 3px;
 width: 14px;
 height: 14px;
 flex: none;
 content: '' }
@media (max-width: 766px) {
 main#app:has(.m-actions) {
  display: flex;
  min-height: calc(100dvh - var(--header-h));
  flex-direction: column }
 body:has(.m-bar) main#app:has(.m-actions) { min-height: 100dvh }
 main#app :has(.m-actions):not(.m-actions *) {
  display: flex;
  padding-bottom: 0;
  flex-direction: column;
  flex: 1 0 auto }
 main#app :has(> .m-actions)::after {
  min-height: var(--s4);
  order: 1;
  content: '';
  flex: 1 0 0 }
 main#app .m-actions {
  margin-top: 0;
  order: 2 }
 body:has(.chat.has-active) #hdr > :not(.m-side, .m-scrim), body:has(.chat-mhead) #hdr > :not(.m-side, .m-scrim), body:has(.rfq-page) #hdr > :not(.m-side, .m-scrim) { display: none }
 body:has(.chat.has-active), body:has(.chat-mhead), body:has(.rfq-page) { padding-top: 0 }
 body:has(.chat.has-active) main#app { padding-bottom: 0 }
 .chat.has-active, .chat-mhead + .chat {
  margin: 0 calc(var(--gutter) * -1);
  border: 0;
  border-radius: 0;
  box-shadow: none }
 .chat.has-active {
  height: 100dvh;
  min-height: 0 }
 .chat-mhead + .chat {
  height: auto;
  min-height: 0 }
 .chat-mhead {
  display: flex;
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--s3) var(--gutter);
  min-height: 64px;
  color: #FFFFFF;
  background: var(--purple-900);
  align-items: center;
  gap: var(--s3) }
 .chat-mhead h1 {
  margin: 0;
  font-size: var(--fs-20);
  color: inherit }
 .up-hero {
  margin: 0 calc(var(--gutter) * -1);
  border-radius: 0 }
 body:has(.acc .m-bar) #hdr > :not(.m-side, .m-scrim), .dash-main:has(> .acc) > .dash-tabs { display: none }
 body:has(.acc .m-actions) #bnav { display: none }
 body:has(.acc .m-bar) { padding-top: 0 }
 .acc-full { padding-top: 0 }
 body:has(.acc .m-actions) main#app { padding-bottom: 0 }
 .od-main, .od-side { display: contents }
 .od-status { order: 1 }
 .od-late, .od .alert { order: 2 }
 .od-ship { order: 3 }
 .od-prod { order: 4 }
 .od-check { order: 5 }
 .od-rate { order: 6 }
 .od-info { order: 7 }
 .od-offers { order: 8 }
 .od-history { order: 9 }
 .od-links { order: 10 }
 .w-only { display: none !important }
 .m-bar {
  display: flex;
  position: sticky;
  top: 0;
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--s2);
  border-bottom: 1px solid var(--border);
  min-height: 60px;
  background: var(--surface);
  align-items: center;
  gap: var(--s2);
  z-index: 20 }
 .m-bar h1 {
  font-size: var(--fs-20);
  font-weight: 600 }
 .m-actions {
  display: flex;
  position: sticky;
  bottom: 0;
  margin: var(--s4) calc(var(--gutter) * -1) 0;
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-direction: column;
  align-items: stretch;
  gap: var(--s2);
  z-index: 20 }
 .m-actions .link-btn { align-self: center }
 .profile-row { display: flex }
 .act-side {
  flex-direction: column;
  align-items: stretch }
 .act-side .act-btn { align-self: flex-start }
 .act-side .btn-gold.act-btn { align-self: stretch }
 .pay-host .tabs {
  padding-bottom: var(--s1);
  border-bottom: 0;
  gap: var(--s2) }
 .pay-host .tabs button {
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  min-height: 44px;
  background: var(--surface) }
 .pay-host .tabs .on {
  border-color: var(--purple-300);
  background: var(--purple-100) }
 .pay-host .tabs .on::after { display: none } }
@media (min-width: 390px) and (max-width: 766px) {
 .addr-form { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .addr-form > .full, .addr-form > [data-field="recipient_name"], .addr-form > [data-field="recipient_phone"] { grid-column: 1 / -1 } }
@media (min-width: 767px) {
 .chat-mhead { display: none }
 .bank-rows .iban-row .copy-btn {
  padding: 0 var(--s4);
  border: 1px solid var(--purple-900);
  border-radius: var(--r-sm);
  min-height: 40px;
  color: var(--purple-900) }
 .m-only { display: none !important }
 .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) }
 .stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 .stat { padding: var(--s5) }
 .stat .value { font-size: var(--fs-32) }
 .act {
  grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4) }
 .act-head {
  flex-direction: column;
  align-items: flex-start }
 .act-head .num, .act-head .small { display: none }
 .act-side .act-btn { display: none }
 .act-side .act-btn-w { display: inline-flex }
 .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 .acc-two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .up-hero { padding: var(--s6) var(--s7) }
 .up-steps {
  display: grid;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5) }
 .up-steps li {
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--border);
  border-bottom: 0;
  flex-direction: column;
  gap: var(--s2) }
 .up-steps .n { font-size: var(--fs-14) }
 .ship-kv {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4) }
 .ship-kv > div {
  padding: 0;
  border: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1) }
 .ship-kv > div > span:first-child { font-size: var(--fs-12) }
 .addr-list, .fav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1023px) {
 .od {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start }
 .od-side {
  position: sticky;
  top: calc(var(--header-h) + 16px) }
 .dsp { grid-template-columns: minmax(0, 1fr) 360px }
 .od-status .od-sum {
  padding-top: var(--s2);
  align-items: center;
  gap: var(--s4) }
 .od-status .od-acts .btn { min-height: 48px }
 .container.dash.account-dash:not(:has(.chat, .proforma)) {
  padding-inline-start: 0;
  max-width: none;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s6) }
 .account-dash:not(:has(.chat, .proforma)) > .side {
  top: var(--header-h);
  padding: var(--s5) var(--s3);
  border: 0;
  border-inline-end: 1px solid var(--border);
  border-radius: 0;
  height: calc(100vh - var(--header-h));
  max-height: none;
  box-shadow: none }
 .account-dash:not(:has(.chat, .proforma)) > .dash-main {
  padding-top: var(--s5);
  max-width: 1180px }
 .acc-rail-head {
  display: flex;
  margin: 0 var(--s3) var(--s4);
  flex-direction: column;
  gap: 2px }
 .acc-rail-head b { font-size: var(--fs-16) } }

/* ===== رأس الدفع المختصر ===== */
.checkout-header .bar { justify-content: space-between }
.checkout-header .secure-note {
 display: inline-flex;
 font-size: var(--fs-14);
 color: var(--on-brand);
 opacity: 0.9;
 align-items: center;
 gap: var(--s2) }

/* ===== بطاقة هوية الحساب ===== */
.prof-id {
 display: flex;
 padding: var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--surface-2);
 align-items: center;
 gap: var(--s4) }
.prof-id-main {
 display: flex;
 min-width: 0;
 flex-direction: column;
 align-items: flex-start;
 gap: var(--s1) }
.prof-name {
 font-size: var(--fs-18);
 line-height: 1.3 }
.prof-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--s2) var(--s3) }
.prof-joined {
 display: inline-flex;
 padding: var(--s2) var(--s3);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 background: var(--surface);
 align-items: center;
 gap: var(--s2) }
.prof-joined .icon {
 padding: 6px;
 border-radius: 8px;
 width: 30px;
 height: 30px;
 color: var(--accent-ink);
 background: var(--purple-100) }
.prof-joined-text {
 display: flex;
 flex-direction: column;
 line-height: 1.35 }
.prof-joined-text b { font-size: var(--fs-14) }
.shop.ck .m-menu-btn, .shop.pay-page .m-menu-btn { display: none }