/* ---------- buttons & chips ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; border-radius:var(--r-btn); border:1.5px solid transparent; font-weight:700; font-size:16px; text-decoration:none; transition:background .2s, transform .15s, border-color .2s, color .2s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); color:var(--on-primary)} .btn-primary:hover{background:var(--primary-h); color:var(--on-primary)}
.btn-outline{background:var(--card); color:var(--ink); border-color:var(--line-2)} .btn-outline:hover{border-color:var(--ink-2); color:var(--ink)}
.btn-sand{background:var(--sand); color:var(--on-sand)} .btn-sand:hover{filter:brightness(.97); color:var(--on-sand)}
.btn-strong{background:var(--strong); color:var(--on-strong)} .btn-strong:hover{opacity:.92; color:var(--on-strong)}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:15px; text-decoration:none}
.btn-ghost:hover{border-color:var(--line-2); color:var(--ink)}
.icon-btn{width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.icon-btn:hover{border-color:var(--line-2)}
.btn-lg{min-height:54px; font-size:17px}
.btn-block{width:100%}
.chip{min-height:44px; padding:0 16px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-size:15px; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:background .2s, border-color .2s, color .2s}
.chip:hover{border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary); font-weight:700}
.chip .cnt{color:var(--ink-2); font-weight:500}
.chip[aria-pressed="true"] .cnt{color:inherit}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.seg{display:inline-flex; gap:4px; padding:4px; background:var(--fill); border-radius:14px; flex-wrap:wrap}
.seg.on-card{background:var(--card); border:1px solid var(--line)}
.seg button{height:40px; padding:0 18px; border-radius:10px; border:none; background:transparent; color:var(--ink); font-size:15px; font-weight:500; transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--strong); color:var(--on-strong); font-weight:700}
.eyebrow{color:var(--warm); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.08em}
:root[lang="ar"] .eyebrow,:root[lang="ar"] .lbl-up{letter-spacing:0}
.lbl-up{font-size:13px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em}
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:8px; font-size:13px; font-weight:700; white-space:nowrap}
.badge-green{background:var(--primary-soft); color:var(--primary-ink)}
.badge-sand{background:var(--sand-soft); color:var(--warm-ink)}
.badge-line{background:var(--card); border:1px solid var(--line); color:var(--ink-3)}
.pill{padding:7px 12px; border-radius:999px; font-size:14px; font-weight:700}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card)}
.muted{color:var(--ink-2)}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.frow > .field{flex:1 1 180px}
.field label,.field .lab{font-weight:700; font-size:14px}
.input{height:50px; border-radius:12px; border:1.5px solid var(--line-2); padding:0 14px; font-size:16px; background:var(--input); color:var(--ink); width:100%}
textarea.input{height:auto; min-height:96px; padding:12px 14px; resize:vertical}
select.input{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%); background-position:calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size:5px 5px; background-repeat:no-repeat; padding-inline-end:36px}
[dir="rtl"] select.input{background-position:20px 22px, 25px 22px}
.input:focus{border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-soft)}
.input[aria-invalid="true"]{border-color:var(--heart)}
.err{color:var(--heart); font-size:14px; font-weight:500}
.hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden}