/* ===== چای — shared components for app pages (auth, onboarding, checkout, dashboard, portal) ===== */
:root { --app-radius: 16px; --ok: #4fbf8f; --warn: #e3a64f; --err: #ea6a8d; }
.is-busy { opacity: .7; pointer-events: none; position: relative; }
.is-busy::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; display: inline-block; margin-inline-start: 8px; animation: ui-spin .7s linear infinite; vertical-align: -2px; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.btn-danger { background: transparent; border: 1px solid #910029; color: #ea6a8d; }
.btn-danger:hover { background: rgba(145, 0, 41, .15); }
.btn-sm { padding: 7px 14px; font-size: 13px; min-height: 36px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; }
.btn-primary:disabled:hover { background: #910029; }
.btn-ghost:disabled:hover, .btn-danger:disabled:hover { background: transparent; }
.toast[data-type="error"] { background: #3a0716; color: #ffd9e3; border: 1px solid #910029; }

/* Forms */
.ui-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.ui-label .field, .ui-label select.field, .ui-label textarea.field { margin: 0; }
.ui-label small { color: var(--ink-mute); font-size: 12px; }
.ui-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ui-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); margin: 6px 0 14px; cursor: pointer; line-height: 1.8; }
.ui-check input { margin-top: 5px; accent-color: #910029; width: 16px; height: 16px; flex-shrink: 0; }
.form-error { background: rgba(145, 0, 41, .14); border: 1px solid rgba(234, 106, 141, .4); color: #ffd4df; padding: 10px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; }
.form-ok { background: rgba(79, 191, 143, .12); border: 1px solid rgba(79, 191, 143, .35); color: #c9f1de; padding: 10px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; }
.input-affix { display: flex; align-items: stretch; direction: ltr; border: 1px solid var(--line, #634b3e); border-radius: 12px; background: rgba(0, 0, 0, .25); overflow: hidden; }
.input-affix span { padding: 0 12px; display: flex; align-items: center; color: var(--ink-mute); font-weight: 600; background: rgba(255, 255, 255, .03); }
.input-affix input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; margin: 0 !important; box-shadow: none !important; }
.hint-ok { color: var(--ok); } .hint-bad { color: var(--err); }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #d8bea5 50%), linear-gradient(135deg, #d8bea5 50%, transparent 50%); background-position: 12px 50%, 18px 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-left: 34px; }

/* Auth / centered card pages */
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.app-center { flex: 1; display: grid; place-items: center; padding: 40px 16px; }
.auth-card { width: 100%; max-width: 440px; background: var(--surface, #3b2723); border: 1px solid var(--line, #634b3e); border-radius: 24px; padding: 32px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-card .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; line-height: 1.9; }
.auth-card .alt { text-align: center; font-size: 14px; color: var(--ink-mute); margin-top: 18px; }
.auth-card .alt a { color: #ea6a8d; font-weight: 700; }
.app-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.app-top .qahvejo-adaptive-logo { width: 64px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-mute); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line, #634b3e); }
.otp-input { letter-spacing: .5em; text-align: center; font-size: 22px; direction: ltr; }

/* Dialog */
.ui-dialog { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, .65); display: grid; place-items: center; padding: 16px; animation: ui-fade .15s ease; }
.ui-dialog-box { width: 100%; max-width: 420px; background: var(--surface, #3b2723); border: 1px solid var(--line, #634b3e); border-radius: 20px; padding: 24px; }
.ui-dialog-box h3 { font-size: 18px; margin-bottom: 8px; }
.ui-dialog-box p { color: var(--ink-soft); font-size: 14px; margin-bottom: 16px; line-height: 1.9; }
.ui-dialog-actions { display: flex; gap: 10px; margin-top: 6px; }
@keyframes ui-fade { from { opacity: 0; } }

/* Wizard */
.wizard { width: 100%; max-width: 640px; }
.steps-bar { display: flex; gap: 6px; margin-bottom: 22px; }
.steps-bar i { flex: 1; height: 4px; border-radius: 4px; background: var(--line, #634b3e); transition: background .3s; }
.steps-bar i.done { background: #910029; }
.wizard .auth-card { max-width: none; }
.wizard-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.avatar-pick { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.avatar-pick .preview { width: 84px; height: 84px; border-radius: 24px; background: #910029 center / cover; border: 1px solid #634b3e; display: grid; place-items: center; font-size: 30px; font-weight: 900; flex-shrink: 0; }
.cover-pick { height: 110px; border-radius: 16px; background: linear-gradient(120deg, #2b1e1a, #3b2723) center / cover; margin-bottom: 14px; display: grid; place-items: center; border: 1px dashed var(--line, #634b3e); cursor: pointer; color: var(--ink-mute); font-size: 13px; }
.checklist { display: grid; gap: 8px; margin: 10px 0 18px; }
.checklist div { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.checklist b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: #3b2723; flex-shrink: 0; }
.checklist .ok b { background: #1f5a42; color: #c9f1de; }
.status-pill { font-family: Vazirmatn, system-ui, sans-serif; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(245, 237, 227, .08); border: 1px solid #634b3e; }
.status-pill.ok { background: rgba(79, 191, 143, .16); color: #9fe3c4; border-color: transparent; } .status-pill.warn { background: rgba(227, 166, 79, .16); color: #f1cf9a; border-color: transparent; } .status-pill.bad { background: rgba(145, 0, 41, .25); color: #ffc2d1; border-color: transparent; }

/* Checkout sheet */
.co { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, .7); display: grid; place-items: center; padding: 16px; animation: ui-fade .15s ease; }
.co, .co-box { overscroll-behavior: contain; }
html:has(.co) { overflow: hidden; }   /* lock the page behind an open sheet */
.co-box { width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow: auto; background: #211714; border: 1px solid #634b3e; border-radius: 22px; padding: 22px; }
.co-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.co-head h3 { font-size: 17px; }
.co-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #634b3e; background: transparent; color: var(--ink); cursor: pointer; font-size: 18px; }
.co-sum { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(145, 0, 41, .14); border: 1px solid rgba(145, 0, 41, .4); margin-bottom: 14px; }
.co-sum strong { font-size: 20px; }
.wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.wallet { height: 46px; border-radius: 12px; border: 1px solid #634b3e; background: #0d0f13; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; direction: ltr; display: flex; align-items: center; justify-content: center; gap: 6px; }
.wallet:hover { border-color: #f5ede3; }
.wallet.apple { background: #000; } .wallet.google { background: #fff; color: #202124; } .wallet.paypal { background: #ffc439; color: #003087; } .wallet.link { background: #00d66f; color: #011e0f; }
.card-el { border: 1px solid #634b3e; border-radius: 12px; background: rgba(0, 0, 0, .3); overflow: hidden; direction: ltr; margin-bottom: 12px; }
.card-el input { width: 100%; border: 0; background: transparent; color: var(--ink); font: 600 16px/1 ui-monospace, Menlo, Consolas, monospace; padding: 14px; outline: none; }
.card-el .row2 { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #634b3e; }
.card-el .row2 input + input { border-left: 1px solid #634b3e; }
.card-el input:focus-visible { box-shadow: inset 0 0 0 2px #f5ede3; border-radius: 8px; }
.card-el:focus-within { border-color: #ea6a8d; box-shadow: 0 0 0 3px rgba(145, 0, 41, .25); }
.test-cards { font-size: 12px; color: var(--ink-mute); line-height: 2; margin: -4px 0 12px; }
.test-cards button { font: inherit; background: none; border: 0; color: #ea6a8d; cursor: pointer; padding: 0; direction: ltr; }
.secure-note { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-mute); margin-top: 12px; }
.co-note { font-size: 12px; line-height: 1.8; color: var(--ink-mute); margin: -6px 0 14px; }   /* checkout: what is shown publicly and to the creator (privacy policy) */
.bank-3ds { text-align: center; }
.bank-3ds .bank-logo { width: 64px; height: 64px; border-radius: 18px; background: #1f2a44; display: grid; place-items: center; font-size: 30px; margin: 0 auto 12px; }
.co-done { text-align: center; }
.co-done .big { font-size: 60px; }

/* Tables & lists (dashboard, admin, portal) */
.ui-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-table th { text-align: right; font-size: 12px; font-weight: 600; color: var(--ink-mute); padding: 10px 12px; border-bottom: 1px solid var(--line, #634b3e); white-space: nowrap; }
.ui-table td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.ui-table tr:hover td { background: rgba(255, 255, 255, .02); }
.table-wrap { overflow-x: auto; }
.empty-state { text-align: center; padding: 36px 16px; color: var(--ink-mute); }
.empty-state .big { font-size: 40px; margin-bottom: 8px; }
.list-actions { display: flex; gap: 6px; flex-wrap: wrap; }
td.list-actions { display: table-cell; white-space: nowrap; }   /* a flex <td> stops being a table cell and breaks the row borders */
td.list-actions > .btn { margin: 2px 0 2px 6px; }
td.list-actions > .btn:last-child { margin-left: 0; }
.kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14px; }
.kv-grid dt { color: var(--ink-mute); } .kv-grid dd { margin: 0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; unicode-bidi: embed; }
.code-box { position: relative; background: #1a120f; border: 1px solid #634b3e; border-radius: 12px; padding: 14px; font: 13px/1.7 ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-all; }
.code-box button { position: absolute; top: 8px; right: 8px; }
.code-box:has(> button) { padding-right: 76px; min-height: 52px; }
.banner-site { background: #910029; color: #f5ede3; text-align: center; padding: 8px 16px; font-size: 14px; font-weight: 600; }

@media (max-width: 560px) {
  .ui-row { grid-template-columns: 1fr; }
  .auth-card { padding: 24px 18px; border-radius: 20px; }
}
@media (max-width: 600px) {
  .ui-table td:first-child:not(.empty-state) { white-space: nowrap; }   /* dates stay on one line */
  .panel .table-wrap, .card .table-wrap {   /* edge shadows hint that the table scrolls sideways */
    background: linear-gradient(to right, var(--surface, #3b2723) 30%, transparent) left center / 36px 100% no-repeat local,
      linear-gradient(to left, var(--surface, #3b2723) 30%, transparent) right center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(245, 237, 227, .22), transparent) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(245, 237, 227, .22), transparent) right center / 14px 100% no-repeat scroll;
  }
}