/* /for-brands: the public page written for customers rather than members. It borrows the landing
   page's sections, cards and rhythm (landing.css is always loaded by publicShell) and only adds
   the four things that page has no equivalent of: the price table, the worked example, the panel
   column list, and the hero's mock statement. No panel script here, so it is all plain CSS on
   server-rendered markup. */

.brands-info .bi-hero { padding-bottom: 8px; }

/* Hero visual: a still frame of the customer's own statement, not the member's task card. Straight
   rather than rotated like .landing-visual-card — this one is a list of rows, and a tilted table
   reads as a decoration instead of as a screenshot. */
.bi-visual-card {
  padding: 20px 22px 18px; border: 1px solid #37305a; border-radius: 20px;
  background: linear-gradient(150deg, #221d3d, #16142a); box-shadow: 0 26px 55px #00000059;
}
.bi-visual-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bi-visual-top span { color: var(--muted); font-size: 11.5px; }
.bi-visual-top strong { color: #ffc46b; font-size: 22px; font-weight: 800; }
.bi-visual-top strong i { margin-inline-start: 5px; font-size: 12px; font-style: normal; font-weight: 600; color: #b8925f; }
.bi-visual-rows { display: grid; gap: 9px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #2c2649; list-style: none; }
.bi-visual-rows li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #cdc7e6; }
.bi-visual-rows li span[dir='ltr'] { color: #8fddff; font-size: 11.5px; }
.bi-visual-rows li b { margin-inline-start: auto; color: #ffc46b; font-size: 12px; }
.bi-visual-kind {
  flex: none; min-width: 54px; padding: 4px 9px; border-radius: 8px; text-align: center;
  background: #6549f52c; color: #a895ff; font-size: 11px; font-weight: 700;
}
.bi-visual-note { margin: 16px 0 0; text-align: center; font-size: 11px; color: #6f6a8a; }

/* ---- price table ---------------------------------------------------------- */
/* Six columns of Persian will not fit a phone, so below 860px each row folds into a stacked card
   and every cell grows the label it lost from the header, out of its own data-label. */
.bi-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: #17142a80; overflow-x: auto; }
.bi-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 13px; }
.bi-table th {
  padding: 15px 16px; border-bottom: 1px solid var(--line);
  color: #9d97b8; font-size: 12px; font-weight: 700; text-align: start; white-space: nowrap;
}
.bi-table td { padding: 16px; border-bottom: 1px solid #221e3a; color: #cdc7e6; vertical-align: top; line-height: 1.9; }
.bi-table tbody tr:last-child td { border-bottom: 0; }
.bi-table tbody tr:hover { background: #ffffff05; }
.bi-table td b { display: block; color: #fff; font-size: 13.5px; font-weight: 700; }
.bi-table td small { display: block; margin-top: 6px; color: #8b86a6; font-size: 11.5px; line-height: 1.95; }
/* Latin-shaped figures inside an RTL row reorder around their separators unless the cell is its
   own bidi run; `unicode-bidi: isolate` is what keeps «۱۰٬۰۰۰ تا ۳۰٬۰۰۰ تومان» in that order. */
.bi-table td.num { white-space: nowrap; unicode-bidi: isolate; }
.bi-table td.strong { color: #ffc46b; font-weight: 700; }
.bi-tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.bi-tag.auto { background: #1d4a3a; color: #7ee6b8; }
.bi-tag.ai { background: #1e3b5c; color: #82cdff; }
.bi-tag.human { background: #4a3a1d; color: #ffc46b; }
.bi-table-foot { max-width: 720px; margin: 18px 0 0; color: #8b86a6; font-size: 12px; line-height: 2; }
.bi-fallback {
  padding: 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #17142a80; color: var(--muted); font-size: 13px;
}

@media (max-width: 860px) {
  .bi-table-wrap { border: 0; background: none; overflow-x: visible; }
  .bi-table, .bi-table tbody, .bi-table tr, .bi-table td { display: block; width: auto; min-width: 0; }
  .bi-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bi-table tr {
    margin-bottom: 12px; padding: 6px 18px 10px;
    border: 1px solid var(--line); border-radius: var(--radius); background: #17142a80;
  }
  .bi-table td { padding: 10px 0; border-bottom: 1px solid #221e3a; }
  .bi-table tr td:last-child { border-bottom: 0; }
  /* The header cell each row lost, repeated per line, because a stacked card has no header row to
     look up to. */
  .bi-table td:before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    color: #6f6a8a; font-size: 11px; font-weight: 700;
  }
  /* The four short cells put their label and their value on one line. Stacked, each row of the
     table ran nine lines tall and the card stopped being scannable; the name and the verdict keep
     their own line because both carry a sentence underneath. */
  .bi-table td:not(:first-child):not(:last-child) {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  }
  .bi-table td:not(:first-child):not(:last-child):before { margin-bottom: 0; flex: none; }
  .bi-table td.num { white-space: normal; text-align: end; }
}

/* ---- what the panel reports ----------------------------------------------- */
.bi-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bi-column {
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px;
  background: #17142a80; transition: .2s;
}
.bi-column:hover { border-color: #6a55c4; }
.bi-column b { display: block; margin-bottom: 6px; color: #fff; font-size: 13.5px; }
.bi-column span { color: var(--muted); font-size: 12px; line-height: 1.95; }

/* ---- the three things this is not ----------------------------------------- */
.bi-not-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.bi-not-list li {
  position: relative; padding: 17px 52px 17px 20px;
  border: 1px solid #4a2f3d; border-radius: 15px; background: #2a17221f;
  color: #cdc7e6; font-size: 13px; line-height: 2;
}
.bi-not-list li:before {
  content: '✕'; position: absolute; inset-inline-start: 18px; top: 17px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #ff5e8726; color: #ff9db4; font-size: 11px; font-weight: 700;
}

.bi-band-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }

@media (max-width: 700px) {
  .bi-not-list li { padding: 15px 46px 15px 16px; }
}