/* /jual.html (seller-only sell form) and the listing rows in Akun saya > Jualan saya. Spec: .zyro/design/sell-spec.md. Tokens only. */

/* author display rules below would override the UA [hidden], so each hidden-able block says it */
form.jual[hidden],.sell-fields[hidden],.sell-notice[hidden],.sess-box[hidden],.sess-more[hidden],.price-preview[hidden],.inc-note[hidden],.sell-panel[hidden],.form-error[hidden]{display:none}

/* state panels share the form column; the column keeps a height while /me and the application load */
.sell-panel:empty{min-height:160px}
.sell-panel .kyc-status{max-width:none;grid-template-columns:minmax(0,1fr)}
.sell-notice{margin-bottom:16px}
.sell-notice strong:focus{outline:3px solid var(--ink);outline-offset:3px}

.sell-fields{display:grid;gap:22px;min-width:0}
.sell-fields>*{min-width:0}
form.jual .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:599px){form.jual .two{grid-template-columns:minmax(0,1fr)}}
.field .hint,.field .err{overflow-wrap:anywhere}

/* price preview and INC/EXC note */
.price-preview{margin:0;font:700 1.125rem/1.3 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.inc-note{margin:0}

/* read-only lines above the button */
.wa-line,.wa-note{margin:0;color:var(--ink-2);font-size:.9375rem;overflow-wrap:anywhere}
.wa-line a{display:inline-block;padding-block:10px;color:var(--teal);font-weight:700;text-underline-offset:3px;touch-action:manipulation}

/* error summary */
.summary{border-radius:var(--r-tile);padding:20px;color:var(--ink)}
.summary:focus{outline:3px solid var(--ink);outline-offset:3px}
.summary h3{margin:0;font:700 1.0625rem/1.3 var(--font-head);letter-spacing:-.01em;color:var(--ink)}
.summary ul{margin:8px 0 0;padding-left:20px;display:grid;gap:2px}
.summary li{overflow-wrap:anywhere}
.summary a{display:inline-block;padding-block:10px;color:var(--rust-text);font-weight:700;text-underline-offset:3px;touch-action:manipulation}
.summary a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}

/* form-level error box (focus lands on its strong) and the session box */
.form-error{border-radius:var(--r-tile);padding:20px;overflow-wrap:anywhere}
.form-error strong:focus{outline:3px solid var(--ink);outline-offset:3px}
.form-error p{margin:0}
.form-error p a{display:inline-block;min-height:0;padding-block:10px;color:var(--teal);font-weight:700;text-underline-offset:3px}
.form-error .btn{justify-self:start}
.sess-box{--focus:var(--ink);display:grid;gap:10px;justify-items:start;background:var(--orange-tint);color:var(--ink);border-radius:var(--r-tile);padding:20px}
.sess-box h3{margin:0;font:700 1.0625rem/1.3 var(--font-head);letter-spacing:-.01em}
.sess-box h3:focus{outline:3px solid var(--ink);outline-offset:3px}
.sess-box p{margin:0;max-width:36em;overflow-wrap:anywhere}
.sess-more{font-weight:700;color:var(--rust-text)}
.sess-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
@media (max-width:599px){.sess-act{width:100%;flex-direction:column}.sess-act>*{width:100%}}

/* sending: fields stay readable but do not take input */
form.jual.is-busy .input[readonly]{background:var(--paper-2);color:var(--ink-2)}
form.jual.is-busy select.input{pointer-events:none;background-color:var(--paper-2)}

/* success panel */
.done{min-width:0;max-width:100%}
.done .done-body{overflow-wrap:anywhere}
.done .done-body>*{min-width:0;max-width:100%}
.done .done-sum{overflow-wrap:anywhere}
.done h3{margin:0;font-size:var(--fs-h3);line-height:1.2}
.done .done-sum{margin:0;font-weight:700}
.done .zbadge{justify-self:start}
.done .tel{white-space:nowrap}
.done-acts .kbtn-quiet{min-height:44px}
/* UI-02: message that replaces the WhatsApp button lines up with the list above (start, not centred) */
.done-acts>.kyc-st-body{display:block;flex:1 1 100%;min-width:0;text-align:start;margin:0;color:var(--ink)}
/* UI-02: soft button sits on the mint-tint done ground, so give it a 3.8:1 edge (--line on --mint-tint) */
.done .btn-soft{box-shadow:inset 0 0 0 2px var(--line)}
@media (hover:hover) and (pointer:fine){.done .btn-soft:hover{box-shadow:inset 0 0 0 2px var(--line),0 8px 0 -2px var(--mint)}}
.done .btn-soft:active{box-shadow:inset 0 0 0 2px var(--line),0 2px 0 0 var(--mint)}
@media (max-width:599px){.done-acts{flex-direction:column;align-items:stretch}.done-acts>*{width:100%;justify-content:center;text-align:center}}

/* status badges for listings (same geometry as .zbadge) */
.zbadge--review{background:var(--night);color:var(--ink-inv)}
.zbadge--rejected{background:var(--rust-text);color:var(--paper)}
.zbadge--withdrawn,.zbadge--hidden{background:var(--paper-2);color:var(--ink-2)}
.done .zbadge--review{background:var(--night);color:var(--ink-inv)}

/* Jualan saya: Iklanmu rows */
.j-head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.j-head-row .j-h{margin:0}
.ad-code{margin:0;font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.ad-code:focus{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.ad-line{margin:0;font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.ad-line--reason{color:var(--ink);font-weight:600}
.ad-line a,.ad-act a{display:inline-block;padding-block:10px;color:var(--teal);font-weight:700;text-underline-offset:3px;touch-action:manipulation}
.ad-act{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px}
.ad-act .kbtn-quiet{min-height:44px}
.ad-row .kyc-confirm{margin-top:8px;max-width:none}
.ad-row .kyc-confirm .kyc-cf-err{margin:0}
.j-live{margin:0}
@media (max-width:599px){.ad-act .kbtn-quiet{width:100%}}
.ad-notice{margin:0 0 12px;padding:12px 16px;background:var(--orange-tint);border-radius:var(--r-tile);font-weight:600;font-size:.9375rem;overflow-wrap:anywhere}
form.jual .field{align-content:start}
.specs-count{margin:0;font-variant-numeric:tabular-nums}
.specs-count.is-over{color:var(--rust-text);font-weight:600}
.ad-specs{margin:0;font-size:.875rem;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}