/* ============================================================================
   mds-comparator.css · comparatorul de companii (lot 182)

   ⚠ Doar jetoanele temei (--xc-*, --xs-*, --xt-*, --xr-*, --xe-*, --xsep):
     nicio culoare, marime de text sau raza noua. Cardurile = aspectul retetelor
     si al cardurilor din screener (mds-screener.css).
   ⚠ Culorile companiilor (--k) sunt cele ale temei: teal, galben, violet,
     portocaliu, albastru, gri. Nu verde/rosu: alea inseamna crestere/scadere.
   ⚠ BARA CU COMPANIILE e lipita sus si are EXACT coloanele tabelului (acelasi grid),
     pe desktop si pe telefon. Pe telefon, de la 3 companii, tabelul se deruleaza pe
     orizontala, iar scriptul tine bara la aceeasi pozitie.
   ============================================================================ */

.mdsx .xcm{ --lc:170px; --cw:minmax(0,1fr); }
.mdsx .xcm.is-wide{ --cg:22px; }
.mdsx .xcm .xgh__k a{ color:inherit; text-decoration:none; }
.mdsx .xcm .xgh__k a:hover{ color:var(--xc-ink); }

/* siglele: fara chenar, fara fundal */
.mdsx .xcm-lg{ flex:none; display:grid; place-items:center; width:28px; height:28px; object-fit:contain; font:600 var(--xt-6)/1 var(--xf); color:var(--xc-ink2); }
.mdsx img.xcm-lg{ width:28px; height:28px; }

.mdsx .xcm-cut{ margin:18px 0 0; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); }

/* ── bara cu companiile ── */
.mdsx .xcm-bar{ position:sticky; top:0; z-index:20; margin:28px 0 0; padding:10px 22px; background:var(--xc-bg); overflow:hidden; }
.mdsx .xcm-bar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--xsep); }
.mdsx .xcm-row{ display:grid; grid-template-columns:var(--lc) repeat(var(--n), var(--cw)); gap:var(--cg,10px); align-items:stretch; }
.mdsx .xcm-l--hd{ display:flex; align-items:flex-end; padding-bottom:4px; }
.mdsx .xcm-co{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); grid-template-areas:"lg id" "px px"; gap:6px 10px; padding:12px 14px 11px; border-radius:var(--xr-i); background:var(--xs-card); box-shadow:var(--xe-lift); }
.mdsx .xcm-co > .xcm-lg{ grid-area:lg; }
.mdsx .xcm-id{ grid-area:id; min-width:0; padding-right:18px; }
.mdsx .xcm-id a{ color:inherit; text-decoration:none; }
.mdsx .xcm-id b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font:600 var(--xt-6)/1.25 var(--xf); color:var(--xc-ink); }
.mdsx .xcm-id a:hover b{ text-decoration:underline; text-underline-offset:3px; }
.mdsx .xcm-id small{ display:flex; align-items:center; gap:6px; margin-top:2px; font:500 var(--xt-8)/1.3 var(--xf); color:var(--xc-ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mdsx .xcm-id small i, .mdsx .xcm-leg i, .mdsx .xcm-lines b i{ flex:none; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--k); }
.mdsx .xcm-px{ grid-area:px; font:600 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mdsx .xcm-px span{ margin-left:6px; font-weight:500; }
.mdsx .xcm-x{ position:absolute; top:9px; right:9px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:var(--xc-ink3); }
.mdsx .xcm-x:hover{ background:var(--xs-track); color:var(--xc-ink); }
.mdsx .xcm-x:focus-visible{ outline:2px solid var(--xc-ink2); outline-offset:2px; }

/* ── cautarea ── */
.mdsx .xcm-findw{ display:flex; align-items:flex-start; gap:12px; margin-top:14px; }
.mdsx .xcm-find{ position:relative; flex:1; max-width:560px; }
.mdsx .xcm-sug{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; margin:0; padding:6px; list-style:none; border-radius:18px; background:#18181b; box-shadow:0 20px 50px -10px rgba(0,0,0,.8); max-height:min(60vh, 420px); overflow:auto; }
.mdsx .xcm-sug li{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"lg b k" "lg s k"; column-gap:10px; padding:8px 10px; border-radius:12px; cursor:pointer; }
.mdsx .xcm-sug li[aria-selected="true"], .mdsx .xcm-sug li:hover{ background:var(--xs-track); }
.mdsx .xcm-sug li.is-in{ cursor:default; opacity:.6; }
.mdsx .xcm-sug .xcm-lg{ grid-area:lg; align-self:center; }
.mdsx .xcm-sug b{ grid-area:b; font:600 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mdsx .xcm-sug small{ grid-area:s; font:500 var(--xt-8)/1.3 var(--xf); color:var(--xc-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mdsx .xcm-sug em{ grid-area:k; align-self:center; font:500 var(--xt-8)/1 var(--xf); font-style:normal; color:var(--xc-ink3); }
.mdsx .xcm-sug .xcm-sug__m{ display:block; padding:10px; font:400 var(--xt-7)/1.4 var(--xf); color:var(--xc-ink2); cursor:default; }
.mdsx .xcm-add{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:56px; padding:8px 18px; border-radius:var(--xr-i); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); color:var(--xc-ink2); font:600 var(--xt-7)/1.3 var(--xf); text-align:center; text-decoration:none; }
.mdsx .xcm-add:hover{ color:var(--xc-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.mdsx .xcm-add small{ font:500 var(--xt-8)/1.2 var(--xf); color:var(--xc-ink3); }

/* ── sectiunile ── */
.mdsx .xcm-sec{ margin-top:72px; }
.mdsx .xcm-sec .xsc-sh{ margin-top:0; }
.mdsx .xcm-goals{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.mdsx .xcm-goal{ padding:16px 18px; border-radius:var(--xr-i); background:var(--xs-card); box-shadow:var(--xe-lift); }
.mdsx .xcm-goal p{ margin:0 0 8px; font:600 var(--xt-8)/1.2 var(--xf); letter-spacing:.05em; text-transform:uppercase; color:var(--xc-ink3); }
.mdsx .xcm-goal b{ display:flex; align-items:center; gap:6px; margin-left:-2px; font:600 var(--xt-5)/1.25 var(--xf); color:var(--xc-ink); }
.mdsx .xcm-goal b .xcm-lg{ width:24px; height:24px; color:var(--k); }
.mdsx .xcm-goal > span{ display:block; margin-top:6px; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); }
.mdsx .xcm-lines{ display:grid; gap:8px; margin-top:20px; max-width:880px; }
.mdsx .xcm-lines p{ margin:0; font:400 var(--xt-6)/1.55 var(--xf); color:var(--xc-ink2); }
.mdsx .xcm-lines b{ display:inline-flex; align-items:center; gap:8px; color:var(--xc-ink); font-weight:600; }
.mdsx .xcm-lines .xcm-warn{ font-size:var(--xt-7); color:var(--xc-ink3); }
.mdsx .xcm-card{ padding:20px 22px; border-radius:var(--xr-c); background:var(--xs-card); box-shadow:var(--xe-lift); }
.mdsx .xcm-chw{ position:relative; height:220px; }
.mdsx .xcm-ch{ display:block; width:100%; height:100%; overflow:visible; }
.mdsx .xcm-ch__0{ stroke:rgba(255,255,255,.14); stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.mdsx .xcm-ch__l{ position:absolute; right:0; transform:translateY(-50%); font:600 var(--xt-8)/1 var(--xf); color:var(--k); font-variant-numeric:tabular-nums; }
.mdsx .xcm-leg{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font:500 var(--xt-8)/1.2 var(--xf); color:var(--xc-ink2); }
.mdsx .xcm-leg span{ display:inline-flex; align-items:center; gap:7px; }

/* ── tabelul ── */
.mdsx .xcm-tw{ padding:6px 22px 14px; }
.mdsx .xcm-r{ display:grid; grid-template-columns:var(--lc) repeat(var(--n), var(--cw)); gap:0 var(--cg,10px); align-items:center; min-height:44px; background:var(--xsep) no-repeat top/100% 1px; }
.mdsx .xcm-l{ font:500 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink2); }
.mdsx .xcm-g{ padding:22px 0 8px; font:600 var(--xt-8)/1.2 var(--xf); letter-spacing:.05em; text-transform:uppercase; color:var(--xc-ink3); }
.mdsx .xcm-v{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:10px 0; font:500 var(--xt-6)/1.3 var(--xf); color:var(--xc-ink2); font-variant-numeric:tabular-nums; }
.mdsx .xcm-v > span{ display:inline-flex; align-items:center; gap:7px; }
.mdsx .xcm-v.on > span{ color:var(--xc-ink); font-weight:700; }
.mdsx .xcm-best{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--k); }
.mdsx .xcm-sp, .mdsx .xcm-fb{ display:inline-flex; align-items:center; gap:6px; font:500 var(--xt-8)/1 var(--xf); font-style:normal; color:var(--xc-ink3); }
.mdsx .xcm-sp i, .mdsx .xcm-fb i{ display:block; width:36px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--xc-ink3) var(--p), var(--xs-track) var(--p)); }
.mdsx .xcm-fb i{ width:70px; background:linear-gradient(90deg, var(--k) var(--p), var(--xs-track) var(--p)); }
.mdsx .xcm-r--a{ align-items:start; }
.mdsx .xcm-r--a > .xcm-l{ padding-top:12px; }
.mdsx .xcm-v--a{ display:block; padding-top:12px; }
.mdsx .xcm-al{ margin:0; padding:0; list-style:none; }
.mdsx .xcm-al li{ position:relative; margin:0 0 10px; padding-left:16px; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink); }
.mdsx .xcm-al li::before{ position:absolute; left:0; top:0; font-weight:700; }
.mdsx .xcm-al--pro li::before{ content:"+"; color:var(--xc-lime); }
.mdsx .xcm-al--con li::before{ content:"\2212"; color:var(--xc-pink); }
.mdsx .xcm-more{ display:inline-block; margin-bottom:8px; padding:0; border:0; background:none; color:var(--xc-ink3); font:600 var(--xt-8)/1.3 var(--xf); cursor:pointer; text-decoration:none; }
.mdsx .xcm-more:hover{ color:var(--xc-ink); }
.mdsx .xcm.is-diff .xcm-r--same{ display:none; }
.mdsx .xcm-note2{ margin:12px 0 0; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); }

/* ── abonament: fara chenar, fara eticheta (ca pe pagina companiei) ── */
.mdsx .xcm-lock{ max-width:640px; }
.mdsx .xcm-lock h2{ margin:0; font:600 var(--xt-4)/1.25 var(--xf); letter-spacing:-.012em; }
.mdsx .xcm-lock ul{ margin:14px 0 22px; padding:0; list-style:none; display:grid; gap:8px; }
.mdsx .xcm-lock li{ position:relative; padding-left:22px; font:400 var(--xt-6)/1.5 var(--xf); color:var(--xc-ink2); }
.mdsx .xcm-lock li::before{ content:""; position:absolute; left:2px; top:.55em; width:8px; height:5px; border-left:2px solid var(--xc-lime); border-bottom:2px solid var(--xc-lime); transform:rotate(-45deg); }

.mdsx .xcm-one, .mdsx .xcm-how p{ max-width:640px; margin:22px 0 0; font:400 var(--xt-6)/1.55 var(--xf); color:var(--xc-ink2); }
.mdsx .xcm-faq{ margin-top:72px; }
.mdsx .xcm .xsc-ex a{ flex:none; white-space:nowrap; padding:8px 13px; border-radius:var(--xr-p); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); font:500 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink2); text-decoration:none; }
.mdsx .xcm .xsc-ex a:hover{ color:var(--xc-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }

/* sub 993px tema are antetul mobil lipit sus (57px): bara sta sub el */
@media (max-width:992px){ .mdsx .xcm-bar{ top:57px; } }

/* ── telefon ── */
@container mdsx (max-width:640px){
  .mdsx .xcm{ --lc:0px; }
  .mdsx .xcm.is-wide{ --cw:150px; }
  .mdsx .xcm-bar{ margin:20px -20px 0; padding:8px 20px; }
  .mdsx .xcm-row{ grid-template-columns:repeat(var(--n), var(--cw)); gap:8px; }
  .mdsx .xcm-l--hd{ display:none; }
  .mdsx .xcm-co{ grid-template-columns:22px minmax(0,1fr); grid-template-areas:"lg id" "px px"; gap:4px 8px; padding:9px 10px; border-radius:16px; }
  .mdsx .xcm-co > .xcm-lg, .mdsx .xcm-co > img.xcm-lg{ width:22px; height:22px; font-size:var(--xt-7); }
  .mdsx .xcm-id{ padding-right:20px; }
  .mdsx .xcm-id b{ font-size:var(--xt-7); }
  .mdsx .xcm-id small{ display:none; }
  .mdsx .xcm-px{ font-size:var(--xt-8); font-weight:500; color:var(--xc-ink2); }
  .mdsx .xcm-x{ top:6px; right:6px; width:24px; height:24px; }
  .mdsx .xcm-findw{ flex-wrap:wrap; }
  .mdsx .xcm-find, .mdsx .xcm-add{ flex:1 1 100%; max-width:none; }
  .mdsx .xcm-add{ flex-direction:row; gap:8px; min-height:44px; }
  .mdsx .xcm-goals{ display:flex; gap:10px; margin:0 -20px; padding:0 20px 4px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px; scrollbar-width:none; }
  .mdsx .xcm-goals::-webkit-scrollbar{ display:none; }
  .mdsx .xcm-goal{ flex:0 0 78%; scroll-snap-align:start; }
  .mdsx .xcm-sec, .mdsx .xcm-faq{ margin-top:52px; }
  .mdsx .xcm-card{ padding:16px; border-radius:var(--xr-i); }
  .mdsx .xcm-chw{ height:180px; }
  .mdsx .xcm-tw{ margin:0 -20px; padding:0 20px 10px; border-radius:0; background:none; box-shadow:none; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .mdsx .xcm-tw::-webkit-scrollbar{ display:none; }
  .mdsx .xcm.is-wide .xcm-t{ width:max-content; min-width:100%; }
  .mdsx .xcm-r{ grid-template-columns:repeat(var(--n), var(--cw)); gap:0 8px; }
  .mdsx .xcm-r > .xcm-l{ grid-column:1 / -1; padding-top:12px; font-size:var(--xt-8); color:var(--xc-ink3); position:sticky; left:0; }
  .mdsx .xcm-v{ padding:4px 0 10px; font-size:var(--xt-7); }
  .mdsx .xcm-sp i{ width:24px; }
  .mdsx .xcm-r > .xcm-l, .mdsx .xcm-g{ max-width:calc(100vw - 40px); }
  .mdsx .xcm-g{ position:sticky; left:0; }
  .mdsx .xcm-v:has(.xcm-sp){ flex-direction:column; align-items:flex-start; gap:5px; }
  .mdsx .xcm-fb i{ width:44px; }
  .mdsx .xcm .xsc-ex{ flex-wrap:nowrap; overflow-x:auto; margin:0 -20px; padding:0 20px; scrollbar-width:none; }
}