/* Part 82 / P25 — the comparison page (resources/views/compare/compare.blade.php).

   One column per product under the shared product card, one row per spec name.
   Wide screens: a real table, the spec names in a column on the right.
   Phones: each row is a grid, the name a band across it and the values in equal
   columns beneath, so the name column does not take a third of a 360px screen.

   The value cells are equal by construction (table-layout:fixed / 1fr tracks), which
   is the point of a comparison: the eye runs along a row. */
.sd82-cmp{
  --sd82-line:#e3ebe8;
  --sd82-band:#f4f8f7;
  --sd82-ink:var(--sd-ink,#23312d);
  --sd82-muted:#6b7b76;
  --sd82-teal:var(--sd-teal-600,#0e8a72);
  margin:8px 0 48px;
}
.sd82-cmp-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-bottom:18px; }
.sd82-cmp .sd82-cmp-title{ margin:0; font-family:'iransans2',sans-serif; font-size:22px; font-weight:700; line-height:1.5; color:var(--sd82-ink); }
.sd82-cmp .sd82-cmp-sub{ margin:2px 0 0; font-size:13px; line-height:1.9; color:var(--sd82-muted); }
.sd82-cmp-tools{ display:flex; align-items:center; gap:18px; }
.sd82-cmp-switch{ display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer; }
.sd82-cmp-switch span{ font-size:14px; color:var(--sd82-ink); }
.sd82-cmp-switch input{ appearance:none; -webkit-appearance:none; box-sizing:border-box; width:40px; height:22px; min-height:0; margin:0; padding:0; border:0; border-radius:11px; background:#cfd8d5; position:relative; cursor:pointer; transition:background .2s ease; flex:none; }
.sd82-cmp-switch input::after{ content:""; position:absolute; top:50%; right:3px; width:16px; height:16px; border-radius:50%; background:#fff; transform:translateY(-50%); transition:transform .2s ease; }
.sd82-cmp-switch input:checked{ background:var(--sd82-teal); }
.sd82-cmp-switch input:checked::after{ transform:translate(-18px, -50%); }
.sd82-cmp-switch input:focus-visible{ outline:2px solid var(--sd82-teal); outline-offset:2px; }
.sd82-cmp a.sd82-cmp-clear{ font-size:13px; color:var(--sd82-muted); text-decoration:underline; text-underline-offset:4px; }
.sd82-cmp a.sd82-cmp-clear:hover{ color:#a3271b; }

/* Part 82 / P26 — ONE table. «کارت محصول رو با ردیف های جدول زیرش یکپارچه کنی که کلا یک
   جدول با گوشه های گرد به نظر بیاد.» The frame is the scroll box (white, one border,
   round corners); the product cells are the table's own head row, with the same column
   lines as the rows under them; and the card inside gives up its shadow, its corners
   and its lift, because the table is the object now. */
.sd82-cmp-scroll{ overflow-x:auto; background:#fff; border:1px solid var(--sd82-line); border-radius:20px; }
.sd82-cmp-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.sd82-cmp-table .sd82-cmp-corner{ width:170px; background:var(--sd82-band); }
.sd82-cmp-table thead th,
.sd82-cmp-table thead td{ padding:0; vertical-align:top; border:0; font-weight:400; text-align:right; }
.sd82-cmp-table thead th + th,
.sd82-cmp-table thead th + td,
.sd82-cmp-table thead td + th{ border-right:1px solid var(--sd82-line); }
.sd82-cmp-product{ position:relative; }
.sd82-cmp-product .sd-card,
.sd82-cmp-product .sd-card:hover{ max-width:none; margin:0; border-radius:0; box-shadow:none; transform:none; }
.sd82-cmp-product .sd-plate{ border-radius:0; }
.sd82-cmp-product .sd-body{ border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0; }
.sd82-cmp-table thead th.sd82-cmp-product,
.sd82-cmp-table thead td.sd82-cmp-slot{ background:#fff; }
/* «وقتی میخوام ضربدر روی عکس رو بزنم … دکمه ی قلب میخوره»: the two sat on the same
   corner. The heart is not this page's job, so it is gone here and the cross has the
   corner to itself. */
.sd82-cmp-product .sd-tools{ display:none; }
.sd82-cmp a.sd82-cmp-remove{ position:absolute; top:10px; left:10px; z-index:4; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:#52625d; font-size:15px; box-shadow:0 1px 4px rgba(35,49,45,.3); transition:color .2s ease, background .2s ease; }
.sd82-cmp a.sd82-cmp-remove:hover{ background:#a3271b; color:#fff; }

.sd82-cmp-slot{ text-align:center; }
.sd82-cmp a.sd82-cmp-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; height:312px; margin:14px; border:2px dashed #b9c9c4; border-radius:16px; color:var(--sd82-teal); font-size:15px; font-weight:700; transition:background .2s ease, border-color .2s ease; }
.sd82-cmp a.sd82-cmp-add i{ font-size:26px; }
.sd82-cmp a.sd82-cmp-add span{ font-size:15px; color:inherit; }
.sd82-cmp a.sd82-cmp-add:hover{ background:var(--sd-teal-050,#e7f6f2); border-color:var(--sd82-teal); }

.sd82-cmp-row th,
.sd82-cmp-row td{ padding:13px 14px; border-top:1px solid var(--sd82-line); font-size:14px; line-height:1.9; color:var(--sd82-ink); text-align:right; vertical-align:top; overflow-wrap:anywhere; background:#fff; }
.sd82-cmp-row th{ background:var(--sd82-band); font-weight:700; }
.sd82-cmp-row th span{ font-size:14px; font-weight:700; color:var(--sd82-ink); }
.sd82-cmp-row td + td{ border-right:1px solid var(--sd82-line); }
.sd82-cmp-row td a{ font-size:14px; color:var(--sd82-teal); }
.sd82-cmp-row td a:hover{ text-decoration:underline; }
/* a differing row is marked on its NAME, not tinted across: between three micromotors
   nine rows of ten differ, and a page that is all highlight has none. */
.sd82-cmp-row.is-diff th span::after{ content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:#e0a100; vertical-align:middle; }
.sd82-cmp-row .sd82-cmp-none{ color:#a9b5b1; font-size:14px; }
.sd82-cmp-row td.sd82-cmp-pad{ background:#fbfcfc; }
.sd82-cmp.is-diff-only .sd82-cmp-row.is-same{ display:none; }

@media (max-width:860px){
  .sd82-cmp .sd82-cmp-title{ font-size:18px; }
  .sd82-cmp-table,
  .sd82-cmp-table thead,
  .sd82-cmp-table tbody{ display:block; }
  .sd82-cmp-table{ min-width:calc(var(--sd82-cols) * 110px); }
  .sd82-cmp-table tr{ display:grid; grid-template-columns:repeat(var(--sd82-cols), minmax(0, 1fr)); }
  .sd82-cmp-table .sd82-cmp-corner{ display:none; }
  .sd82-cmp a.sd82-cmp-add{ height:calc(100% - 16px); min-height:170px; margin:8px; border-radius:12px; font-size:13px; }
  .sd82-cmp a.sd82-cmp-remove{ top:6px; left:6px; width:32px; height:32px; }
  .sd82-cmp-table thead tr{ border-bottom:1px solid var(--sd82-line); }
  .sd82-cmp a.sd82-cmp-add span{ font-size:13px; }
  .sd82-cmp-row th{ grid-column:1 / -1; padding:7px 12px; border-top:0; }
  /* the band's text stays at the right edge while a three-product table is scrolled */
  .sd82-cmp-row th span{ position:sticky; right:12px; font-size:13px; }
  .sd82-cmp-row td{ padding:10px 10px 14px; border-top:0; font-size:13px; }
  .sd82-cmp-row td a{ font-size:13px; }
}

/* ---------- the «افزودن کالا» dialog ---------- */
.sd82-cmp-dialog-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sd82-cmp-dialog-head h2{ margin:0; font-family:'iransans2',sans-serif; font-size:18px; font-weight:700; color:#23312d; }
.sd82-cmp-dialog-close{ width:36px; height:36px; border:0; border-radius:50%; background:#f1f5f4; color:#52625d; font-size:15px; cursor:pointer; }
.sd82-cmp-dialog-close:hover{ background:#e2eae7; }
.sd82-cmp-dialog input.sd82-cmp-filter{ width:100%; height:44px; padding:0 14px; margin-bottom:14px; border:1px solid #cfd8d5; border-radius:12px; font-size:14px; background:#fff; box-sizing:border-box; }
.sd82-cmp-dialog input.sd82-cmp-filter:focus{ outline:2px solid var(--sd-teal-600,#0e8a72); outline-offset:1px; border-color:transparent; }
.sd82-cmp-cands{ list-style:none; margin:0; padding:2px; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; max-height:56vh; overflow-y:auto; }
.sd82-cmp-cands li{ margin:0; }
.sd82-cmp-cands li[hidden]{ display:none; }
.sd82-cmp-cands a.sd82-cmp-cand{ display:flex; align-items:center; gap:12px; padding:8px; border:1px solid #e3ebe8; border-radius:14px; transition:border-color .2s ease, background .2s ease; }
.sd82-cmp-cands a.sd82-cmp-cand:hover{ border-color:var(--sd-teal-600,#0e8a72); background:var(--sd-teal-050,#e7f6f2); }
.sd82-cmp-cand-photo{ flex:none; width:64px; height:64px; border-radius:10px; background:#f4f8f7; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.sd82-cmp-cand-photo picture{ display:contents; }
.sd82-cmp-cand-photo img{ width:100%; height:100%; object-fit:contain; }
.sd82-cmp-cand-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sd82-cmp-cand-text .sd82-cmp-cand-title{ font-size:13px; font-weight:700; line-height:1.8; color:#23312d; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sd82-cmp-cand-text .sd82-cmp-cand-meta{ font-size:12px; color:#6b7b76; }
.sd82-cmp-dialog p.sd82-cmp-nomatch,
.sd82-cmp-dialog p.sd82-cmp-dialog-foot{ margin:14px 0 0; font-size:13px; line-height:1.9; color:#6b7b76; }
.sd82-cmp-dialog p.sd82-cmp-nomatch[hidden]{ display:none; }