/* ==========================================================================
   Darya Rent — the customer account area (client feedback round 1).
   Page-specific rules on top of darya-ref.css; every colour and radius is a
   darya-ref token. Logical properties throughout so /en mirrors for free.
   ========================================================================== */

/* ---------------------------------------------------------------- shell --- */
.acct { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--gap, 24px); align-items: start; padding-block: 8px 48px; }
.acct-side { position: sticky; top: calc(var(--header-h, 68px) + 16px); display: grid; gap: 16px; }
.acct-side .card + .card { margin-top: 0; }
.acct-main { min-width: 0; }
.acct-head h1 { margin: 0 0 10px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }
.acct-head .gold-rule { margin-bottom: 20px; }
.acct-content > .card + .card { margin-top: 18px; }
.acct-content h2 { font-size: 1.12rem; margin: 0 0 14px; }
.acct-content h3 { font-size: 1rem; }
.acct .card { display: block; }

/* the person */
.acct-who { display: flex; align-items: center; gap: 14px; padding: 18px; }
.acct-who .avatar-upload-container { flex: none; }
.acct-who #account-avatar .profile-image { position: relative; width: 72px; height: 72px; }
.acct-who .avatar-view { cursor: pointer; }
.acct-who .mt-card-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold-tint); }
.acct-avatar { width: 72px; height: 72px; object-fit: cover; display: block; }
.acct-who .avatar-bg-overlay { display: none; }
.acct-who .acct-avatar-edit { position: absolute; inset-inline-end: -4px; inset-block-end: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .8rem; box-shadow: var(--shadow-sm); }
.acct-who-text { display: grid; gap: 3px; min-width: 0; }
.acct-name { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.acct-who .muted { font-size: .86rem; }
.acct-email { overflow-wrap: anywhere; }

/* the menu */
.acct-menu { padding: 10px; display: grid; gap: 2px; }
.acct-link { display: flex; align-items: center; gap: 12px; min-height: var(--tap, 44px); padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; border-inline-start: 3px solid transparent; transition: background .15s ease, color .15s ease; }
.acct-link svg { flex: none; color: var(--muted); }
.acct-link:hover { background: var(--bg-alt); text-decoration: none; }
.acct-link.is-current { background: var(--brand-tint); color: var(--brand); border-inline-start-color: var(--gold); }
.acct-link.is-current svg { color: var(--brand); }
.acct-logout { color: var(--danger); margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.acct-logout svg { color: var(--danger); }
.acct-logout:hover { background: var(--danger-tint); }

/* ------------------------------------------------------------ utilities --- */
.acct .num, .acct .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.acct .table { margin: 0; vertical-align: middle; }
.acct .table th, .acct .table td { text-align: start; }
.acct .pricelist th, .acct .pricelist td { text-align: start; }
.acct .pricelist td:last-child, .acct .pricelist th:last-child { text-align: end; }
.acct .kv { grid-template-columns: max-content minmax(0, 1fr); }
.acct .kv dd { overflow-wrap: anywhere; }
.acct .btn-row { align-items: center; }
.acct .btn-row form { margin: 0; }
.acct .notice a { font-weight: 700; text-decoration: underline; }
.acct .state-pill { white-space: nowrap; }
.acct .empty { padding: 36px 20px; }
.acct .empty h2 { margin-bottom: 14px; }
.acct .section-note { color: var(--muted); font-size: .9rem; margin: -4px 0 16px; }
.acct .req { color: var(--danger); font-weight: 700; margin-inline-start: 2px; }
.acct .field-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* stat tiles */
.stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.stat-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--bg-alt); }
.stat-box .k { color: var(--muted); font-size: .84rem; display: block; }
.stat-box .v { font-weight: 700; font-size: 1.12rem; display: block; margin-top: 4px; }
.stat-box.is-primary { background: var(--brand); border-color: var(--brand); }
.stat-box.is-primary .k { color: rgba(255,255,255,.75); }
.stat-box.is-primary .v { color: #fff; font-size: 1.35rem; }
.stat-box.is-gold { background: var(--gold-tint); border-color: #E4D3B6; }
.stat-box.is-gold .v { color: var(--gold-ink); }

/* overview cards */
.acct-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.acct-grid a.card { padding: 18px; display: grid; gap: 6px; }
.acct-grid a.card h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.acct-grid a.card h2 svg { color: var(--gold-ink); flex: none; }
.acct-grid a.card p { margin: 0; }

/* forms */
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .field + .field { margin-top: 0; }
.form-grid .span-2 { grid-column: 1 / -1; }
.acct .field > input[type=text], .acct .field > input[type=tel], .acct .field > input[type=email], .acct .field > input[type=number], .acct .field > input[type=date], .acct .field > select, .acct .field > textarea, .acct .field > .input-wrap { width: 100%; }
.acct .field.is-hidden { display: none; }
.acct .entity-set[hidden] { display: none; }
.acct .choice-list.is-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acct .choice-list.is-inline .choice { align-items: center; padding: 12px 14px; }
.acct .choice-list.is-inline .choice input { margin-top: 0; }
.acct .readonly-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap, 44px); padding: 8px 14px; background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; flex-wrap: wrap; }
.acct .readonly-box .btn { min-height: 36px; }
.acct .form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.acct input[type=file] { width: 100%; }
.acct .otp-input { max-width: 240px; direction: ltr; }
.acct .jdp { inset-inline-start: 0; }
.acct .jdp-head .jdp-year { display: inline-flex; gap: 4px; align-items: center; }
.acct .jdp-head .jdp-year .jdp-nav { min-width: 30px; min-height: 30px; font-size: .95rem; }
.acct .jdp-head strong { display: inline-flex; align-items: center; gap: 6px; }

/* tabs */
.acct-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.acct-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap, 44px); padding: 10px 16px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.acct-tabs a:hover { color: var(--ink); text-decoration: none; }
.acct-tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.acct-tabs .badge-count { background: var(--bg-sunk); color: var(--muted); border-radius: 999px; padding: 1px 9px; font-size: .78rem; }
.acct-tabs a.is-active .badge-count { background: var(--brand-tint); color: var(--brand); }

/* booking cards */
.bk-card { display: flex; gap: 16px; align-items: center; padding: 16px; }
.bk-thumb { width: 128px; height: 82px; object-fit: cover; border-radius: 9px; flex: none; background: var(--bg-sunk); display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.bk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.bk-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.bk-top strong { font-size: 1.02rem; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .88rem; }
.bk-meta svg { vertical-align: -4px; margin-inline-end: 4px; }
.bk-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.bk-foot .price { font-weight: 700; font-size: 1.05rem; }
.bk-code { font-size: .82rem; color: var(--muted); }

/* timeline: horizontal on wide screens */
@media (min-width: 720px) {
  .timeline.is-horizontal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
  .timeline.is-horizontal li { flex-direction: column; align-items: center; text-align: center; padding: 0 4px; gap: 8px; }
  .timeline.is-horizontal li::before { inset-inline-start: 50%; inset-block-start: 13px; width: 100%; height: 2px; bottom: auto; }
  .timeline.is-horizontal .label { font-size: .84rem; }
}

/* documents */
.doc-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.doc-card { padding: 16px; display: grid; gap: 10px; }
.doc-card h3 { margin: 0; display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.doc-preview { aspect-ratio: 16 / 10; background: var(--bg-sunk); border-radius: var(--radius-sm); overflow: hidden; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line-strong); }
.doc-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-preview.has-file { border-style: solid; }
.doc-preview .doc-pdf { display: grid; gap: 6px; justify-items: center; font-weight: 700; color: var(--brand); }
.doc-card .field-hint { margin: 0; }
.doc-card form { display: grid; gap: 8px; }
.doc-card .btn-row .btn { flex: 1; }

/* wallet + transactions */
.acct .filters { margin-bottom: 16px; }
.acct .filters .field { flex: 1 1 160px; }
.acct .filters .btn { min-height: var(--tap, 44px); }
.acct .txn-code { font-weight: 700; }
.acct .amount-input { position: relative; }
.acct .amount-input .unit { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; pointer-events: none; }

/* history table */
.acct .history-table td { font-size: .88rem; }

/* ----------------------------------------------------------- responsive --- */
@media (max-width: 960px) {
  .acct { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .acct-side { position: static; gap: 12px; }

  /* r2 · W33 — the account menu on a phone: a horizontal, snap-aligned tab
     strip. The row starts at the reading edge (RTL: right) with the current
     tab scrolled into view by darya-account.js; both ends fade out so a
     half-visible tab reads as "more this way", not as a clipped layout. */
  .acct nav.card.acct-menu.acct-tabs-strip, .acct-menu.acct-tabs-strip {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 6px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding-inline: 12px;
    scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .acct-menu.acct-tabs-strip::-webkit-scrollbar { display: none; }
  .acct-menu.acct-tabs-strip.at-start { -webkit-mask-image: linear-gradient(to left, transparent, #000 18px); mask-image: linear-gradient(to left, transparent, #000 18px); }
  html[dir="ltr"] .acct-menu.acct-tabs-strip.at-start { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
  .acct-menu.acct-tabs-strip.at-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 18px); mask-image: linear-gradient(to right, transparent, #000 18px); }
  html[dir="ltr"] .acct-menu.acct-tabs-strip.at-end { -webkit-mask-image: linear-gradient(to left, transparent, #000 18px); mask-image: linear-gradient(to left, transparent, #000 18px); }
  .acct-menu.acct-tabs-strip.at-start.at-end { -webkit-mask-image: none; mask-image: none; }

  .acct-link { flex: none; scroll-snap-align: start; border-inline-start: 0; border-bottom: 3px solid transparent; padding: 8px 12px; min-height: 42px; gap: 8px; white-space: nowrap; font-size: .92rem; }
  .acct-link svg { width: 18px; height: 18px; }
  .acct-link.is-current { border-bottom-color: var(--gold); background: var(--brand-tint); }
  .acct-logout { margin-top: 0; border-top: 0; border-radius: var(--radius-sm); }
  .acct-count { margin-inline-start: 2px; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .acct .choice-list.is-inline { grid-template-columns: minmax(0, 1fr); }
  .bk-card { align-items: flex-start; }
  .bk-thumb { width: 96px; height: 64px; }
  .acct .card { padding: 16px; }
  .acct-who { padding: 14px; gap: 12px; }
  .acct-who #account-avatar .profile-image, .acct-who .mt-card-avatar, .acct-avatar { width: 60px; height: 60px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-head h1 { font-size: 1.3rem; }
  .acct .filters .field { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .bk-card { flex-direction: column; }
  .bk-thumb { width: 100%; height: 150px; }
}

/* the page never scrolls sideways on a phone: wide things scroll inside
   their own box (tables, the tab strip), everything else wraps */
.acct-shell, .acct, .acct-main, .acct-content { max-width: 100%; min-width: 0; }
.acct .table-scroll { overflow-x: auto; max-width: 100%; }
.acct .card { min-width: 0; }
.acct .btn-row { flex-wrap: wrap; }
.acct img { max-width: 100%; }

/* ------------------------------------------------------------- controls --- */
/* darya-direction.css turns every input into an underline with !important;
   the reference design's boxed fields have to win back inside the account. */
.acct input[type=text], .acct input[type=tel], .acct input[type=email], .acct input[type=number], .acct input[type=date], .acct input[type=password], .acct input:not([type]), .acct select, .acct textarea, .acct .form-control, .acct .form-select {
  width: 100%; min-height: var(--tap, 44px) !important; padding: 11px 14px !important;
  font: inherit !important; font-weight: 500 !important; color: var(--ink) !important;
  background: #fff !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-sm) !important;
  box-shadow: none !important; height: auto !important; line-height: 1.4 !important;
}
.acct input:hover:not(:disabled), .acct select:hover, .acct textarea:hover { border-color: #A9B5C7 !important; }
.acct input:focus, .acct select:focus, .acct textarea:focus, .acct .form-control:focus { border-color: var(--brand-hover) !important; box-shadow: 0 0 0 3px rgba(27,62,124,.13) !important; outline: none; }
.acct input:disabled, .acct select:disabled, .acct textarea:disabled { background: var(--bg-sunk) !important; color: var(--muted) !important; }
.acct textarea { min-height: 96px !important; line-height: 1.8 !important; }
.acct input[type=file] { width: 100%; padding: 9px 12px !important; background: var(--bg-alt) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-sm) !important; min-height: var(--tap, 44px); font: inherit; }
.acct .otp-input { font-size: 1.6rem !important; letter-spacing: .55em !important; text-align: center !important; font-weight: 700 !important; padding-inline-start: .55em !important; }
.acct select { appearance: auto; -webkit-appearance: auto; padding-inline-end: 36px !important; }
.acct .field > label, .acct .form-label { display: block; font-size: .875rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.acct-shell { max-width: 100%; }

/* Phone width: keep account tables readable instead of clipping — tighter
   cells, the wrapper scrolls, and a soft edge hints that it does. */
@media (max-width: 600px) {
  .acct .table th, .acct .table td { padding: 8px 6px; font-size: .84rem; }
  .acct .table-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
  html[dir="ltr"] .acct .table-scroll { mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
}

/* r2 · notifications */
.acct-count { margin-inline-start: auto; background: var(--danger, #B3261E); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.acct-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.acct-notifs .notif { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-inline-start: 3px solid transparent; }
.acct-notifs .notif.is-unread { border-inline-start-color: var(--gold, #C9A24D); background: #FFFDF8; }
.acct-notifs .notif-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-tint, #E8EEF7); color: var(--brand, #0C1C3D); display: inline-flex; align-items: center; justify-content: center; }
.acct-notifs .notif.is-promo .notif-ico { background: var(--gold-tint, #F7F0E1); color: var(--gold-ink, #7E5A1D); }
.acct-notifs .notif-body { flex: 1 1 auto; min-width: 0; }
.acct-notifs .notif-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.acct-notifs .notif-text { margin: 6px 0 0; line-height: 1.8; overflow-wrap: anywhere; }
.acct-notifs .notif-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.acct-notifs .link-btn { background: none; border: 0; padding: 0; color: var(--brand, #0C1C3D); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; min-height: 32px; }

/* r2 · W28 — the profile photo. The avatar is a button: tap → file picker →
   downscaled in the browser → posted; the picture swaps the moment it is
   chosen. Delete falls back to the initial-letter avatar. */
.acct-who .avatar-view { cursor: pointer; }
.acct-avatar-btn { position: relative; display: block; width: 72px; height: 72px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.acct-avatar-btn:focus-visible { outline: 3px solid rgba(27,62,124,.3); outline-offset: 2px; }
.acct-avatar-btn .acct-avatar { border-radius: 50%; border: 2px solid var(--gold-tint); }
.acct-avatar-btn.is-busy .acct-avatar { opacity: .5; }
.acct-avatar-btn .acct-avatar-edit { position: absolute; inset-inline-end: -4px; inset-block-end: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.acct-avatar-btn .acct-avatar-edit svg { width: 14px; height: 14px; }
.acct-avatar-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.acct-avatar-actions .link-btn { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; text-decoration: underline; min-height: 28px; }
.acct-avatar-actions .link-btn.is-danger { color: var(--danger); }
.acct-avatar-msg { font-size: .82rem; margin: 4px 0 0; min-height: 0; }
.acct-avatar-msg.is-error { color: var(--danger); }
.acct-avatar-msg.is-ok { color: var(--ok); }
.acct-avatar-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.acct-who-text .acct-avatar-actions { margin-top: 2px; }

/* the same picture in the site header when signed in */
.icon-btn-profile .icon-btn-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; border: 1.5px solid var(--gold-tint); }

/* r2 · W29 — support tickets */
.tk-new { margin-bottom: 18px; }
.tk-new summary { cursor: pointer; font-weight: 700; color: var(--brand); list-style: none; display: flex; align-items: center; gap: 10px; min-height: var(--tap, 44px); }
.tk-new summary::-webkit-details-marker { display: none; }
.tk-new summary::after { content: "+"; margin-inline-start: auto; font-size: 1.3rem; color: var(--muted); }
.tk-new[open] summary::after { content: "−"; }
.tk-new form { margin-top: 12px; display: grid; gap: 14px; }
.tk-list .tk { display: grid; gap: 8px; padding: 16px; border-inline-start: 3px solid transparent; color: var(--ink); text-decoration: none; }
.tk-list .tk:hover { text-decoration: none; background: var(--bg-alt); }
.tk-list .tk.is-open { border-inline-start-color: var(--warn); }
.tk-list .tk.is-replied { border-inline-start-color: var(--ok); }
.tk-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.tk-top strong { font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
.tk-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; color: var(--muted); font-size: .84rem; }
.tk-meta .num { unicode-bidi: isolate; }
.tk-excerpt { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tk-last { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); background: var(--bg-alt); border-radius: var(--radius-sm); padding: 8px 12px; overflow-wrap: anywhere; }
.tk-last svg { flex: none; color: var(--ok); margin-top: 2px; }
.tk-last span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-thread { display: grid; gap: 12px; margin-top: 4px; }
.tk-msg { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-alt); border: 1px solid var(--line); max-width: 92%; }
.tk-msg.is-me { justify-self: start; }
.tk-msg.is-staff { justify-self: end; background: var(--ok-tint); border-color: #B6DCC8; }
.tk-msg-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.tk-msg-head strong { color: var(--ink); }
.tk-msg p { margin: 0; line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; }
/* r3 · W3 / A12 — rich-text replies and the follow-up box */
.tk-body { line-height: 1.95; overflow-wrap: anywhere; color: var(--ink); }
.tk-body p { margin: 0 0 .55em; white-space: normal; }
.tk-body > :last-child { margin-bottom: 0; }
.tk-body ul, .tk-body ol { margin: 0 0 .55em; padding-inline-start: 1.4em; }
.tk-body li { margin: .15em 0; }
.tk-body a { color: var(--navy, #0C1C3D); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold, #BA8E4A); }
.tk-reply { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.tk-reply label { font-weight: 600; font-size: .92rem; }
.tk-reply textarea { width: 100%; min-height: 96px; resize: vertical; }
.tk-reply-actions { display: flex; justify-content: flex-end; }
@media (max-width: 640px) { .tk-reply-actions .btn { width: 100%; } }
.tk-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 14px; }
.tk-back svg { transition: transform .15s ease; }
html[dir="rtl"] .tk-back svg { transform: scaleX(-1); }
@media (max-width: 640px) { .tk-msg { max-width: 100%; } }

/* ==========================================================================
   discount codes v2 · «دریافت کد تخفیف» (hotel group + Asan Tahator)
   ========================================================================== */
.acct-dot { margin-inline-start: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--gold, #C9A24D); box-shadow: 0 0 0 3px var(--gold-tint, #F7F0E1); flex: none; }
.acct-link.is-current .acct-dot { box-shadow: 0 0 0 3px #fff; }
.acct .dc-intro { display: flex; gap: 14px; align-items: flex-start; }
.dc-intro-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-tint, #F7F0E1); color: var(--gold-ink, #7E5A1D); display: inline-flex; align-items: center; justify-content: center; }
.dc-intro-ico svg { width: 22px; height: 22px; }
.dc-intro-text { margin: 0; line-height: 1.9; }
.dc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; align-items: stretch; }
.acct-content > .dc-grid + .card { margin-top: 18px; }
.acct .dc-card { display: flex; flex-direction: column; min-width: 0; }
.dc-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dc-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint, #EEF2F9); color: var(--brand, #0C1C3D); display: inline-flex; align-items: center; justify-content: center; }
.dc-ico svg { width: 22px; height: 22px; }
.dc-head-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.acct-content .dc-head h2 { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.dc-percent-hint { color: var(--muted); font-size: .84rem; }
.dc-head .state-pill { flex: none; white-space: nowrap; margin-top: 2px; }
.dc-note { margin: 0 0 14px; line-height: 1.9; }
.dc-kv { margin: 0 0 14px; }
.dc-kv dd.ltr { direction: ltr; text-align: start; unicode-bidi: isolate; }
.dc-state { line-height: 1.9; }
.dc-inline-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .05em; white-space: nowrap; unicode-bidi: isolate; }

/* the code block */
.dc-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "v b"; gap: 6px 12px; align-items: center; padding: 14px 16px; border: 1.5px dashed var(--gold, #C9A24D); border-radius: var(--radius, 14px); background: var(--gold-tint, #F7F0E1); }
.dc-code-k { grid-area: k; color: var(--gold-ink, #7E5A1D); font-size: .84rem; font-weight: 700; }
.dc-code-v { grid-area: v; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); font-weight: 700; letter-spacing: .08em; color: var(--brand, #0C1C3D); background: transparent; padding: 0; overflow-wrap: anywhere; text-align: start; unicode-bidi: isolate; }
.dc-code .dc-copy { grid-area: b; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dc-copy.is-copied { background: var(--ok, #1F7A4D); border-color: var(--ok, #1F7A4D); color: #fff; }
.dc-meta { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; color: var(--ink-soft, #35405A); }
.dc-meta li { position: relative; padding-inline-start: 18px; line-height: 1.7; }
.dc-meta li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold, #C9A24D); }
.dc-barter { line-height: 1.9; }
.dc-barter-note { display: block; font-size: .86rem; font-weight: 400; margin-top: 2px; }
.acct .dc-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.acct .dc-actions .btn { min-width: 180px; }

/* the form */
.dc-form { display: grid; gap: 12px; margin-top: auto; }
.dc-form .field input { text-align: start; }
.dc-form .btn { justify-self: start; min-width: 180px; }
.dc-hist-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .05em; direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (max-width: 900px) {
  .dc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dc-head { flex-wrap: wrap; }
  .dc-head .state-pill { order: 3; margin-inline-start: 56px; }
  .dc-code { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "v" "b"; }
  .dc-code .dc-copy { justify-self: start; }
  .acct .dc-actions .btn, .dc-form .btn { width: 100%; }
}

.acct .dc-history .dc-hist-code { white-space: nowrap; }

/* r3 · «درخواست‌های اجارهٔ خودرو» — owner applications with the reviewer's note */
.pa-intro { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pa-intro-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint, #E8EDF7); color: var(--brand); display: grid; place-items: center; flex: none; }
.pa-intro-ico svg { width: 24px; height: 24px; }
.pa-intro > div { flex: 1 1 260px; }
.pa-intro-text { margin: 0; }
.pa-card { display: grid; gap: 14px; }
.pa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pa-title { margin: 0 0 4px; font-size: 1.1rem; }
.pa-meta { margin: 0; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.pa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; counter-reset: pa; }
.pa-steps li { position: relative; list-style: none; padding: 14px 0 0; margin: 0; font-size: .78rem; color: var(--muted); text-align: center; }
.pa-steps li::marker { content: none; }
.pa-steps li::after { content: none; }
.pa-steps li::before { content: ""; display: block; height: 6px; border-radius: 999px; background: var(--bg-sunk); position: absolute; inset: 0 0 auto 0; }
.pa-steps li.is-done::before { background: var(--ok); }
.pa-steps li.is-current::before { background: var(--gold, #C9A24B); }
.pa-steps li.is-current { color: var(--text); font-weight: 700; }
.pa-note { border: 1px solid var(--gold, #C9A24B); border-inline-start-width: 4px; background: var(--gold-tint, #FBF6E9); border-radius: var(--radius-sm); padding: 12px 14px; }
.pa-note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; color: var(--brand); }
.pa-note-head .muted { margin-inline-start: auto; }
.pa-note p { margin: 0; white-space: pre-line; }
.pa-waiting { margin: 0; }
@media (max-width: 560px) {
  .pa-steps { grid-template-columns: repeat(5, 1fr); }
  .pa-steps li { font-size: .68rem; }
  .pa-intro .btn { width: 100%; }
}

/* ---------- r3 PROFILE · W25: Shahkar verdict under the national id ---------- */
.acct-shahkar { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: .85rem; line-height: 1.8; font-weight: 600; }
.acct-shahkar svg { flex: 0 0 auto; margin-top: 4px; }
.acct-shahkar.is-verified { color: #1B7F4B; }
.acct-shahkar.is-mismatch, .acct-shahkar.is-error { color: var(--danger, #B42318); }
.acct-shahkar.is-unchecked { color: #8A6D1D; }
.notif .notif-new { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--gold, #C9A24B); color: #14224A; font-size: .75rem; font-weight: 700; }

/* r5 · W6 — the IBAN's fixed «IR».
   The prefix is part of the field, not a label: it sits inside the same border
   so the customer reads "IR" + their digits as one number, and it is inert
   (aria-hidden, no pointer events) because there is nothing to interact with. */
.bank-affix {
  display: flex;
  align-items: stretch;
  direction: ltr;
  border: 1px solid var(--line, #D9DEE8);
  border-radius: 10px;
  background: var(--field-bg, #fff);
  overflow: hidden;
}

.bank-affix:focus-within {
  border-color: var(--gold, #BA8E4A);
  box-shadow: 0 0 0 3px rgba(186, 142, 74, .18);
}

.bank-affix .bank-affix-prefix {
  display: flex;
  align-items: center;
  padding-inline: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted, #5B6B84);
  background: var(--field-affix-bg, #F3F5F9);
  border-inline-end: 1px solid var(--line, #D9DEE8);
  user-select: none;
  pointer-events: none;
}

/* the input already carries the page's field styling; drop its own frame so the
   two read as a single control */
.bank-affix input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bank-affix input:focus { outline: none; box-shadow: none !important; }

/* r6 · W1 — card number and IBAN read left-to-right, like the withdrawal report.
   darya.css gives every RTL text field `direction: rtl` with `[dir="rtl"]
   input[type="text"]` (0,2,1), which beat `.acct .ltr` (0,2,0): the digits
   were laid out right-to-left, so the groups of four came out in reverse
   order (IBAN «75666» showed as «6 7566»). This selector outranks it.
   The card number keeps the site's placement for LTR fields in an RTL form
   (right-aligned, like the mobile and e-mail fields and like the report); the
   IBAN's digits start right after the fixed «IR» so the two read as one. */
[dir] .acct input.bank-num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
[dir] .acct .bank-affix input.bank-num,
[dir] .acct .bank-affix input.bank-num::placeholder { text-align: left; }
/* the grouped IBAN is 30 characters; at phone width it has to fit beside the
   «IR» without scrolling, at the 16px that keeps iOS from zooming the page */
[dir] .acct .bank-affix input.bank-num { letter-spacing: 0; padding-inline: 10px !important; }

/* r8 · P2 — the account holder: read-only, always the profile name */
.acct input.is-locked {
  background-color: var(--bg-alt, #F4F6F9) !important; border-style: dashed !important; cursor: default; font-weight: 600;
  /* a lock on the reading-end side says «not editable» without a word */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: left 12px center !important; padding-inline-end: 40px !important;
}
[dir="ltr"] .acct input.is-locked { background-position: right 12px center !important; }
.acct .holder-rule { margin: 8px 0 0; padding: 9px 12px; font-size: .88rem; }

/* ------------------------------------------- authorised representatives --- */
/* r11 · D — the list is one grid: a value always starts under its heading. The numbers are isolated
   left-to-right runs (bdi) inside a cell that still starts at the heading's edge. */
.reps { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.reps-head, .reps-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 92px; column-gap: 16px; align-items: center; padding: 12px 16px; }
.reps-head { background: var(--bg-alt); color: var(--muted); font-size: .82rem; font-weight: 700; padding-block: 10px; }
.reps-row + .reps-row, .reps-head + .reps-row { border-top: 1px solid var(--line); }
.reps-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.reps-name strong { font-weight: 700; overflow-wrap: anywhere; }
.reps-cell { min-width: 0; text-align: start; }
.reps-label { display: none; color: var(--muted); font-size: .8rem; }
.reps-num { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.reps-act { display: flex; justify-content: flex-end; }
.reps-act form { margin: 0; }
.reps-head > :last-child { visibility: hidden; }
.reps-form { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
@media (max-width: 640px) {
  .reps { border: 0; border-radius: 0; overflow: visible; display: grid; gap: 10px; }
  .reps-head { display: none; }
  .reps-row { grid-template-columns: minmax(0, 1fr) max-content; row-gap: 8px; border: 1px solid var(--line) !important; border-radius: var(--radius-sm); padding: 12px 14px; }
  .reps-name { grid-column: 1; }
  .reps-act { grid-column: 2; grid-row: 1; }
  .reps-cell { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; }
  .reps-label { display: inline; }
}