/* =============================================================================
   acx-abonament.css — stratul vizual pentru intrarea „Abonament” din meniul de
   chat (`.acx`). Se încarcă DUPĂ `chat-v7.css`, ca tot ce ține de patch-ul 2.
   -----------------------------------------------------------------------------
   DE CE E FIȘIER SEPARAT ȘI NU O SECȚIUNE ÎN `chat-patch2.css`:
   la momentul scrierii, `assets/chat-patch2.css` era editat în paralel de
   altcineva. Conținutul de mai jos e scris ca secțiunea §13 a acelui fișier și
   poate fi lipit acolo cuvânt cu cuvânt, fără nicio schimbare — vezi
   `00-ABONAMENT.md`, punctul „Unde pun CSS-ul”. Dacă rămâne fișier separat,
   trebuie adăugat în controller după `chat-patch2.css`; ordinea contează doar
   față de `chat-v7.css`, nu între cele două.

   CE NU CONȚINE, DELIBERAT: nicio regulă pentru butonul în sine.
   `.acx-item` (chat-v7.css:307-321) e deja scris pentru un element fără
   decorații proprii — `border: none; background: none; text-align: left;
   cursor: pointer` — adică exact pentru un `<button>`. Dovada că merge nu e
   teoretică: pastilele „Mail săptămânal educativ” și „Feedback” din același
   meniu sunt deja `<button class="acx-pill">` și arată corect în producție.
   Font-ul se moștenește fiindcă `framework.bundle.css:398` are
   `:where(button, input, select, textarea) { font: inherit; color: inherit }`
   — `:where()` are specificitate ZERO, deci `font-size`/`font-weight`/`color`
   din `.acx-item` rămân peste, iar `font-family`, pe care `.acx-item` nu-l
   declară, se moștenește de la `body`. Fără acel `:where`, butonul ar fi ieșit
   cu fontul implicit de sistem lângă restul meniului scris cu Inter.
   ============================================================================= */


/* =========================================================================
   14. PASTILA DE STARE A ABONAMENTULUI („Activ” / „Inactiv”)
   -------------------------------------------------------------------------
   Singurul element nou din tot patch-ul de abonament. Rostul ei: intrarea de
   meniu duce în afara site-ului (portalul Stripe), iar un om care vrea doar să
   verifice că i se ia banii sau nu nu trebuie să facă drumul dus-întors până
   la Stripe ca să afle. Starea o avem deja în pagină, gratis, din
   `user.has_active_subscription` (coloana `ntr_users.has_active_subscription`,
   ținută la zi de webhook-urile din `StripeWebhookService`).

   Culorile nu sunt alese, sunt luate din setul existent: `--ok` / `--ok-text`
   pentru activ, `--muted` pentru inactiv (chat-v7.css:50-52 și :39). Nu am
   folosit `--danger` pentru „Inactiv” intenționat: un abonament încheiat nu e
   o eroare, e o stare normală; roșul ar transforma o informație într-o alarmă.

   `margin-left: auto` o împinge la dreapta în flex-ul lui `.acx-item`; `gap:
   12px` de pe părinte garantează că nu se lipește de text nici la 320px.
   ====================================================================== */
.acx-abonament-stare {
  margin-left: auto;
  flex: 0 0 auto;                 /* nu se comprimă când textul e lung */
  white-space: nowrap;
  font-family: var(--font-body);  /* pe mobil `.acx-item` trece pe Sora (chat-v7.css:451);
                                     pastila rămâne pe Inter, ca restul micro-textelor */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--ok-text);
  background: rgba(var(--ok-rgb), .13);
  border: 1px solid rgba(var(--ok-rgb), .28);
}
.acx-abonament-stare--off {
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  border-color: var(--hairline-strong);
}

/* Iconița moștenește `stroke: currentColor` din `.acx-item svg`, deci se
   colorează singură la hover și în starea activă. Nimic de făcut. */


/* =========================================================================
   14b. RAIL-UL DE PE DESKTOP — pastila trebuie ascunsă, dar NUMAI acolo
   -------------------------------------------------------------------------
   CAPCANĂ MĂSURATĂ ÎN CSS-UL EXISTENT: atributul `data-minified` de pe `.acx`
   înseamnă două lucruri opuse, în funcție de lățime.
     · ≥1024px  (chat-v7.css:389-418) → sidebarul e COLAPSAT în rail de 76px;
       acolo `.acx-item-t`, `.acx-sub` și textul pastilelor sunt `display:none`.
     · ≤1023.98px (chat-v7.css:427-470) → meniul e DESCHIS pe tot ecranul;
       acolo totul trebuie să se vadă.
   O regulă `.acx[data-minified] .acx-abonament-stare { display: none }` scrisă
   în afara unui media query ar fi ascuns pastila exact când meniul e deschis pe
   telefon — adică singura dată când omul chiar se uită la ea. De aceea regula
   stă în interiorul `@media (min-width: 1024px)`, ca perechea ei din chat-v7.
   ====================================================================== */
@media (min-width: 1024px) {
  .acx[data-minified] .acx-abonament-stare { display: none; }
}

/* -------------------------------------------------------------------------
   Butonul se întinde pe tot rândul. NU e cosmetică.

   Celelalte intrări de meniu sunt `<a class="acx-item">` — elemente de nivel
   bloc, care umplu rândul din construcție. Abonamentul e `<button>`, fiindcă
   face POST spre portalul de facturare, iar un `<button>` are `width: auto` și
   se strânge la lățimea textului (shrink-to-fit). Rezultat: o intrare de meniu
   vizibil mai îngustă decât toate celelalte, cu zona de click mai mică — pe
   telefon, exact unde contează.

   `.acx-group` nu există în chat-v7.css, deci nu se poate rezolva făcând
   părintele flex; se rezolvă pe buton.
   ------------------------------------------------------------------------- */
.acx-nav .acx-item.acx-abonament,
.acx-nav button.acx-item {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}