/*
 * Paleta unica a modulelor CDH.
 * ---------------------------------------------------------------------------
 * DE CE EXISTA
 *
 * Masurat pe 18 septembrie 2026, in CSS-ul pluginului: 207 culori distincte,
 * 827 de utilizari. Noua verzi care vor sa insemne acelasi lucru, patru
 * portocalii, doua scari de gri care nu se ating (una albastruie, una pura),
 * si doua module scrise integral in paleta Tailwind (`bonus-details-block`,
 * `nd-cards-base`) cu culori care nu exista nicaieri altundeva pe site.
 *
 * Nimic din toate astea n-a fost o decizie. Sunt straturi: cineva a scris un
 * modul cu paleta pe care o avea la indemana, altcineva a copiat o valoare
 * aproximativa, si asa mai departe.
 *
 * Fisierul asta e vocabularul complet.
 *
 * Plierea celor 207 culori peste cei 38 de tokeni: 52% din utilizari raman
 * identice, 70% sunt sub pragul perceptibil (dE < 3). Restul se muta cu
 * intentie -- griurile pure devin albastrui, verzii Tailwind devin verdele
 * marcii, negrul din umbre devine navy.
 *
 * ---------------------------------------------------------------------------
 * VALORILE DE AICI NU SUNT ALE NIMANUI
 *
 * Pana la 2.60.0, valorile de mai jos erau paleta lui cazino.ro. Asta insemna
 * ca orice site care instala pluginul primea marca altcuiva si trebuia sa o
 * dea la o parte -- iar daca uita o treapta, ramanea cu un portocaliu strain
 * intr-un colt, fara sa aiba de unde sti de ce.
 *
 * Acum sunt un set neutru, ales ca sa fie folosibil si evident ca nu e al
 * nimanui: gri rece, albastru sobru pentru marca, verde pentru actiune. Un
 * site care nu defineste nimic arata corect, dar nu arata ca cazino.ro.
 *
 * Testul, cand se schimba ceva aici: WordPress curat, tema implicita, niciun
 * token definit. Daca apare portocaliul lui cazino, a mai ramas decor in core.
 *
 * ---------------------------------------------------------------------------
 * CUM ISI PUNE UN SITE PALETA
 *
 * Doua feluri, amandoua fara sa atinga pluginul:
 *
 *   1. `cdh-client/overrides.css` in tema. Se incarca automat, ultimul, dupa
 *      toate stilurile pluginului (vezi CDHC\Tema). Asa isi tine cazino.ro
 *      paleta. Nimic de inregistrat, e de ajuns sa existe fisierul.
 *
 *   2. Oriunde in CSS-ul temei, daca ajunge dupa fisierul asta:
 *
 *          :root {
 *            --cdh-accent: culoarea-de-marca;
 *            --cdh-action: culoarea-de-actiune;
 *          }
 *
 * Exemplul e fara valori hexa intentionat: altfel un `grep --cdh-accent:` ar
 * intoarce comentariul inaintea declaratiei reale. S-a intamplat deja.
 *
 * Nu e nevoie de toti tokenii. Cine redefineste `--cdh-accent` si
 * `--cdh-action` a facut deja cea mai mare parte; treptele `-050`, `-100` si
 * canalele `-rgb` se schimba doar daca nuanta noua le cere.
 *
 * Douazeci de linii intr-o tema, nu o copie a modulului.
 *
 * ---------------------------------------------------------------------------
 * DOUA NUME PENTRU ACEEASI CULOARE, INTENTIONAT
 *
 * Scara (`--cdh-n-500`) si rolul (`--cdh-mut`) arata spre aceeasi valoare.
 * Modulele folosesc rolul: `--cdh-mut` spune de ce e culoarea acolo, `--cdh-n-500`
 * spune doar cat de inchisa e. Scara ramane pentru cazurile in care chiar ai
 * nevoie de o treapta anume -- o bordura cu un pas mai inchisa decat vecina --
 * si pentru ca o tema sa poata redefini toata scara dintr-o miscare.
 *
 * ---------------------------------------------------------------------------
 * VERDE PENTRU ACTIUNE, PORTOCALIU PENTRU ETICHETA
 *
 * Regula vine din implementarea live: pe cazino.ro CTA-urile sunt verzi, iar
 * portocaliul marcheaza potrivirea de top si eticheta ei. De aceea tokenii se
 * numesc `action` si `accent`, nu `green` si `orange` -- un site care le
 * inverseaza schimba doua valori, nu cauta prin CSS ce insemna „verde".
 *
 * ---------------------------------------------------------------------------
 * ECHIVALENTE, PENTRU MIGRAREA MODULELOR (faza 2)
 *
 * Tokeni locali, cele sapte prefixe de dinainte:
 *
 *     --sh-ink        --tc-ink      --fer-ink        -> --cdh-ink
 *     --sh-ink-2                                     -> --cdh-ink-2
 *     --sh-mut        --tc-mut      --fer-mut        -> --cdh-mut
 *     --sh-line       --tc-line     --fer-line       -> --cdh-line
 *     --sh-line-strong                               -> --cdh-line-strong
 *     --sh-bg         --fer-bg                       -> --cdh-bg
 *     --sh-soft       --fer-soft                     -> --cdh-soft
 *     --sh-green      --tc-green    --mc-green       -> --cdh-action
 *     --sh-green-deep --tc-green-deep --mc-green-deep -> --cdh-action-press
 *     --sh-green-050                                 -> --cdh-action-100
 *     --fer-accent    --fer-accent-press             -> --cdh-accent, -press
 *     --sh-amber-bg   --sh-amber-tx                  -> --cdh-warn-050, --cdh-warn-ink
 *     --sh-blue                                      -> --cdh-info
 *     --fer-navy                                     -> --cdh-n-900
 *
 * `--fer-navy` era descris aici drept culoare locala a barei de fereastra.
 * Nu e: `#172E52` apare de 38 de ori in patru fisiere, din care 21 in umbre.
 * E culoarea de umbra a intregului sistem, de unde si `--cdh-shade-rgb`.
 *
 * Hexa scrise direct, in ordinea numarului de utilizari:
 *
 *     #FFFFFF                        -> --cdh-bg        (fundal)  / --cdh-n-0
 *     rgba(0,0,0,a) in umbre         -> rgba(var(--cdh-shade-rgb), a)
 *     #F36620 #F06800 #FF8C00 #F97316 -> --cdh-accent
 *     #D55515 #C2521A               -> --cdh-accent-press
 *     #FFF1EB #FFF8F4               -> --cdh-accent-100 / -050
 *     #1A7F37 #22C55E #16A34A #00B34A #00B44A #008C3A -> --cdh-action
 *     #067434 #007A32 #166534 #15803D #155724 #059669 -> --cdh-action-press
 *     #E1F4E9 #E6F5EC #DCFCE7 #F0FDF4 #ECFDF5 #D4EDDA -> --cdh-action-100
 *     #86EFAC #ABEDC7                -> --cdh-action-200
 *     #5FE39A                        -> --cdh-action-300 (si actiunea pe intunecat)
 *     #555 #666 #888 #6B7280 #8A97A3 #9CA3AF -> --cdh-mut / --cdh-n-400
 *     #222 #333 #1F2937 #111827 #0F172A -> --cdh-ink
 *     #374151 #3D5866 #5B6C78        -> --cdh-n-600 / -700
 *     #E8E8E8 #EEEEEE #E0E0E0 #D0D0D0 #E5E7EB #D1D5DB -> --cdh-line / --cdh-line-strong
 *     #F0F0F0 #FAFAFA #F3F4F6 #F5F6F8 #EEF1F5 #EDF1F4 -> --cdh-pill / --cdh-soft
 *     #2F80ED #1E63C4 #1E40AF        -> --cdh-info / --cdh-info-press
 *     #E6F1FB #E7F0FD #EEF6FF        -> --cdh-info-050
 *     #E9B10A #F59E0B #E5941F #FFD700 -> --cdh-warn
 *     #FBEFD3 #FAEEDA #FEF3C7 #FFF3CD #FDF6DE -> --cdh-warn-050
 *     #946200 #9A7100 #B5720C #633806 #7E4E22 -> --cdh-warn-ink / --cdh-accent-ink
 *     #E13011 #DC2626 #EE4425        -> --cdh-danger
 *     #FDECE8                        -> --cdh-danger-050
 *     #B23A16 #8E1B06                -> --cdh-danger-ink
 *     #3C3489 #EEEDFE                -> --cdh-alt / --cdh-alt-050
 *
 * Ce NU se pliaza si ramane local, pana se decide daca e paleta sau accident:
 * culorile de logo si cele din SVG-uri cu marca unui operator.
 */

:root {
  /* --- Scara neutra. Rampa temei (`--neutral-100..800`), plus alb si navy. --- */
  --cdh-n-0: #FFFFFF;
  --cdh-n-050: #F7F8F9;
  --cdh-n-100: #EFF1F3;
  --cdh-n-200: #E1E4E8;
  --cdh-n-300: #C9CED4;
  --cdh-n-400: #A8B0B8;
  --cdh-n-500: #6B7480;
  --cdh-n-600: #4C555F;
  --cdh-n-700: #343C45;
  --cdh-n-800: #232A31;
  --cdh-n-900: #12171C;

  /* Rolurile neutre. Astea se folosesc in module; scara de mai sus e pentru
     cazurile in care chiar ai nevoie de o treapta anume. */
  --cdh-bg: var(--cdh-n-0);
  --cdh-soft: var(--cdh-n-050);
  --cdh-pill: var(--cdh-n-100);
  --cdh-line: var(--cdh-n-200);
  --cdh-line-strong: var(--cdh-n-300);
  --cdh-mut: var(--cdh-n-500);
  --cdh-ink-2: var(--cdh-n-700);
  --cdh-ink: var(--cdh-n-800);
  /* Textul de pe orice suprafata plina, colorata: butoane, insigne, capete de
     rand, pastile de rang. 46 de locuri in treisprezece fisiere. Pana acum
     citeau `--cdh-bg`, fiindca migrarea a legat `#fff` de tokenul cu valoarea
     aia. Numele mintea: un site care isi face fundalul paginii inchis ar fi
     inchis si textul de pe butoane, adica text negru pe verde.

     Rolul exista si dintr-un motiv practic: regulile lui poarta `!important`,
     si nu din obisnuinta proasta.
     Pe cazino.ro tema are `.entry-content table:not(.slots-data) a {color}`,
     specificitate (0,2,2) fata de (0,1,0) cat are `.cdh-sh__cta` -- vitrina e
     un tabel in `.entry-content`, deci fara `!important` toate butoanele ei ar
     deveni portocalii. Sarcina portanta, nu balast.
     `!important` pe o valoare fixa blocheaza insa tematizarea; pe un token, nu:
     un site care isi vrea butonul altfel schimba rolul de aici, in loc sa se
     lupte cu specificitatea in `overrides.css`.
     NU se redefinesc in blocul intunecat: butonul plin isi pastreaza fundalul
     colorat in ambele teme, deci textul lui nu trebuie sa se rastoarne. */
  --cdh-cta-ink: var(--cdh-n-0);
  --cdh-cta-warn-ink: var(--cdh-danger);
  /* Umplutura butoanelor de actiune. Separata de `--cdh-action` fiindca acela
     e folosit si la scoruri, borduri si stari de verificare -- schimbarea lui
     ar recolora jumatate din tabel.
     Valoarea e verdele APASAT, nu cel de baza, si nu din gust: alb pe
     `--cdh-action` (#09AE4E pe cazino) da 2,93:1, sub pragul de 4,5:1 pentru
     text. Pe verdele apasat (#067434) da 5,91:1. Masurat in inventarul de
     butoane din 13 septembrie 2026, care a inventariat 40 de familii de
     controale si a ales exact aceasta pereche. */
  --cdh-cta-bg: var(--cdh-action-press);
  --cdh-cta-bg-hover: #10592F;
  --cdh-cta-bg-active: #0C4324;
  /* Caretul de la capatul butoanelor de actiune. Ca masca, nu ca imagine:
     asa ia culoarea textului prin `currentColor` si merge la fel pe butonul
     verde si pe cel cu contur. Motivul pentru care nu e fisier: sageata temei
     (`img/right-long-arrow.svg`) are `stroke="#F36720"` scris in ea si e pusa
     ca `background-image`, deci ramane portocalie pe orice buton. */
  /* `viewBox` strans pe glifa, nu 0 0 24 24: in caseta patrata chevronul
     ocupa doar jumatate din inaltime, deci orice dimensiune data casetei
     producea un semn de jumatate din ea. Asa, inaltimea casetei E
     inaltimea semnului. */
  --cdh-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7.8 4.8 8.4 14.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");

  /* --- Marca: etichete, evidentieri, potrivirea de top. --- */
  --cdh-accent-050: #F5F8FC;
  --cdh-accent-100: #E5EEF9;
  --cdh-accent-200: #BBD3F0;
  --cdh-accent-300: #7FA9E0;
  --cdh-accent: #2F6FD0;
  --cdh-accent-press: #2557A8;
  --cdh-accent-ink: #1B3F77;

  /* --- Actiune: CTA-uri, bordura de selectie, scoruri bune. --- */
  --cdh-action-050: #F4FBF7;
  --cdh-action-100: #E3F4EB;
  --cdh-action-200: #B4E2C8;
  --cdh-action-300: #6FD39A;
  --cdh-action: #1E9E58;
  --cdh-action-press: #14703D;

  /* --- Stari. --- */
  --cdh-info-050: #EAF2FD;
  --cdh-info-300: #A8CBFF;
  --cdh-info: #2F80ED;
  --cdh-info-press: #1C6AD6;

  /* `warn` e pentru compromis asumat, nu pentru eroare: „minim 50 lei",
     „rulaj x35". Ceva ce utilizatorul trebuie sa vada, nu ceva stricat.
     Tot el e si auriul de scor si de stea. */
  --cdh-warn-050: #FAF1DC;
  --cdh-warn-300: #F3D18A;
  --cdh-warn: #D99A0B;
  --cdh-warn-ink: #7A5308;

  --cdh-danger-050: #FBECE8;
  --cdh-danger-300: #F3B3A5;
  --cdh-danger: #D33A22;
  --cdh-danger-ink: #8A2412;

  /* Podiumul: locurile 1, 2 si 3 din tabel si din vitrina. Aur, argint, bronz.
     Nu se pliaza pe paleta: bronzul dus pe portocaliul marcii ar face locul 3
     sa arate ca un buton, iar cele trei locuri n-ar mai fi distinse de nimic.
     Trei trepte fiecare, fiindca asa se folosesc -- bordura, fundal, text. */
  --cdh-podium-1: #D4A017;
  --cdh-podium-1-200: #EBC65C;
  --cdh-podium-1-050: #F8EFD8;
  --cdh-podium-2: #9AA5AE;
  --cdh-podium-2-200: #C6CDD3;
  --cdh-podium-2-050: #F1F3F5;
  --cdh-podium-3: #B57A45;
  --cdh-podium-3-200: #D6A377;
  --cdh-podium-3-050: #F6EDE4;

  /* Movul de badge. Nu se pliaza pe info: e singura culoare care distinge
     eticheta de tip de restul si, fortata pe albastru, ar deveni acelasi
     lucru cu linkul. Doua utilizari azi, pastrat ca sa nu dispara. */
  --cdh-alt-050: #EDECF7;
  --cdh-alt: #4A44A0;

  /* --- Umbre si translucide. In canal, ca modulele sa-si aleaga opacitatea.
     Doua canale, nu unul: umbra e mai neutra decat navy-ul, iar o bordura
     translucida din navy pe fundal alb trebuie sa ramana albastruie. --- */
  --cdh-shade-rgb: 18, 23, 28;
  --cdh-n-900-rgb: 18, 23, 28;
  /* Marca si actiunea au nevoie de canal fiindca apar des ca voal foarte
     subtire peste alb: `rgba(var(--cdh-action-rgb), .04)` ca fundal de rand
     selectat. Fara canal, fiecare modul si-ar scrie din nou hexa. */
  --cdh-accent-rgb: 47, 111, 208;
  --cdh-action-rgb: 30, 158, 88;
  /* Si doua trepte ale verdelui, fiindca voalurile din cardurile fara depunere
     nu sunt toate din verdele de baza: unele sunt din verdele apasat, altele
     din cel pal. Fara ele ar fi ramas zece hexa scrise direct in fisier. */
  --cdh-action-press-rgb: 20, 112, 61;
  --cdh-action-200-rgb: 180, 226, 200;
  /* Fundalul are canal fiindca apare ca voal alb peste o imagine: eticheta
     peste logoul operatorului, capul de tabel peste randul de sub el. Pe
     intunecat trebuie sa devina voal inchis, nu sa ramana alb. */
  --cdh-bg-rgb: 255, 255, 255;
  /* Starile apar si ele ca voal: fundalul unui rand de avertisment, halo-ul
     unui scor. Fiecare canal de aici are cel putin o utilizare reala. */
  --cdh-warn-rgb: 217, 154, 11;
  --cdh-danger-rgb: 211, 58, 34;
  --cdh-info-press-rgb: 28, 106, 214;
  --cdh-alt-rgb: 74, 68, 160;
  --cdh-action-300-rgb: 111, 211, 154;
  --cdh-n-600-rgb: 76, 85, 95;
  --cdh-podium-1-rgb: 212, 160, 23;
  --cdh-podium-2-rgb: 154, 165, 174;
  --cdh-podium-3-200-rgb: 214, 163, 119;
  --cdh-shadow-modal: 0 24px 60px rgba(var(--cdh-shade-rgb), .34);
  --cdh-shadow-sheet: 0 -12px 36px rgba(var(--cdh-shade-rgb), .26);
  --cdh-shadow-card: 0 2px 8px rgba(var(--cdh-shade-rgb), .08);
  --cdh-shadow-pop: 0 8px 24px rgba(var(--cdh-shade-rgb), .16);

  /* Voalul de sub ferestre. Mai deschis la bottom sheet, unde caseta acopera
     oricum jumatatea de jos a ecranului si un voal la fel de opac ar face
     pagina sa para stinsa, nu acoperita. */
  --cdh-scrim: rgba(var(--cdh-shade-rgb), .55);
  --cdh-scrim-sheet: rgba(var(--cdh-shade-rgb), .5);

  /* --- Geometrie. --- */
  --cdh-r-modal: 16px;
  --cdh-r-sheet: 20px;
  --cdh-r-card: 12px;
  --cdh-r-cta: 9px;
  --cdh-r-pill: 999px;

  --cdh-ease: cubic-bezier(.2, .8, .2, 1);
}

/*
 * Tema intunecata.
 *
 * Exista deja in doua module (`.cdh-sh--dark` in vitrina, `.cz-dark` la
 * cardurile fara depunere): 95 de utilizari de culoare scrise direct, fara
 * niciun token. Valorile de aici sunt chiar alea, nu unele noi -- `#5FE39A`
 * pentru actiune, `#A8CBFF` pentru info, `#FFB4A2` pentru alerta -- ca
 * migrarea sa nu schimbe cum arata.
 *
 * Doar culorile se redefinesc. Geometria si umbrele raman: un colt rotunjit
 * nu depinde de lumina, iar umbrele sunt deja navy, deci merg pe fundal inchis.
 *
 * Selectorul e o clasa pe radacina, nu `prefers-color-scheme`: modulele CDH
 * stau intr-o pagina care isi alege singura tema, si sunt sectiuni intunecate
 * pe pagini altfel deschise -- cardurile fara depunere sunt exact asta.
 *
 * ---------------------------------------------------------------------------
 * DE CE SUNT PATRU SELECTORI SI DE CE SE REPETA ROLURILE
 *
 * Prima versiune declara doar `.cdh-dark` si `[data-cdh-theme="dark"]`, nume
 * inventate atunci. Markup-ul folosea de mult altele: `.cdh-sh--dark` (45 de
 * reguli in vitrina) si `.cz-dark` (10 in cardurile fara depunere). Rezultatul
 * era ca blocul asta nu se aplica NICIODATA, iar regulile scrise pentru fundal
 * inchis citeau valorile de zi -- text alb care devine navy pe navy.
 *
 * Rolurile (`--cdh-bg`, `--cdh-ink`...) se repeta aici, desi pe `:root` sunt
 * doar aliasuri catre scara. Un alias se calculeaza o data, acolo unde e
 * declarat, iar descendentii mostenesc rezultatul, nu formula: redefinirea lui
 * `--cdh-n-0` pe un container nu recalculeaza `--cdh-bg` mostenit de la `:root`.
 * Fara liniile astea, o sectiune intunecata ar primi scara noua si rolurile
 * vechi, adica jumatate de tema.
 */
.cdh-dark,
[data-cdh-theme="dark"],
.cdh-sh--dark,
.cz-dark {
  --cdh-n-0: #12171C;
  --cdh-n-050: #181E24;
  --cdh-n-100: #20272E;
  --cdh-n-200: #2C343C;
  --cdh-n-300: #4C555F;
  --cdh-n-400: #6B7480;
  --cdh-n-500: #9AA3AD;
  --cdh-n-600: #C3C9CF;
  --cdh-n-700: #E1E4E8;
  --cdh-n-800: #EFF1F3;
  --cdh-n-900: #FFFFFF;
  /* Rolurile, repetate: aliasurile de pe `:root` nu se recalculeaza aici. */
  --cdh-bg: var(--cdh-n-0);
  --cdh-soft: var(--cdh-n-050);
  --cdh-pill: var(--cdh-n-100);
  --cdh-line: var(--cdh-n-200);
  --cdh-line-strong: var(--cdh-n-300);
  --cdh-mut: var(--cdh-n-500);
  --cdh-ink-2: var(--cdh-n-700);
  --cdh-ink: var(--cdh-n-800);

  --cdh-accent-050: #141E2C;
  --cdh-accent-100: #1B2A3D;
  --cdh-accent: #8FB8EE;
  --cdh-accent-press: #BBD3F0;
  --cdh-accent-ink: #DCE9F9;

  --cdh-action-050: #102219;
  --cdh-action-100: #173021;
  --cdh-action: #6FD39A;
  --cdh-action-press: #B4E2C8;

  --cdh-info-050: #13243A;
  --cdh-info: #A8CBFF;
  --cdh-info-press: #CFE1FF;

  --cdh-warn-050: #2A2110;
  --cdh-warn: #F3D18A;
  --cdh-warn-ink: #F3D18A;

  --cdh-danger-050: #2E1712;
  --cdh-danger: #F3B3A5;
  --cdh-danger-ink: #F8D6CE;

  --cdh-alt-050: #1D1B33;
  --cdh-alt: #B0ABE8;

  /* Podiumul pe intuneric: aceleasi metale, dar treapta luminoasa trece in
     fata, fiindca pe fundal inchis bronzul saturat devine noroi. */
  --cdh-podium-1: #EBC65C;
  --cdh-podium-1-200: #D4A017;
  --cdh-podium-1-050: #332911;
  --cdh-podium-2: #C6CDD3;
  --cdh-podium-2-200: #9AA5AE;
  --cdh-podium-2-050: #252C32;
  --cdh-podium-3: #D6A377;
  --cdh-podium-3-200: #B57A45;
  --cdh-podium-3-050: #2B2118;

  /* Si canalele, altfel un voal scris ca `rgba(var(--cdh-action-rgb), .1)`
     intr-o regula intunecata ar folosi verdele de zi. */
  --cdh-accent-rgb: 143, 184, 238;
  --cdh-action-rgb: 111, 211, 154;
  --cdh-action-press-rgb: 180, 226, 200;
  --cdh-action-200-rgb: 29, 61, 41;
  --cdh-bg-rgb: 18, 23, 28;
}

/* ==========================================================================
   Caretul butoanelor de actiune
   --------------------------------------------------------------------------
   Un singur semn la capatul tuturor CTA-urilor. Inainte erau trei situatii pe
   acelasi site: tabelul pe desktop n-avea nimic, cel pe telefon avea o sageata
   lunga, iar butoanele temei o sageata dintr-un fisier cu portocaliu fix in el.

   Prin `::after` cu masca, nu prin markup: asa prind si componentele construite
   din JS (comparatorul), fara sa le atinga, iar semnul ia culoarea textului --
   alb pe butonul plin, verde pe cel cu contur, fara nicio regula in plus.

   Sta in fisierul de tokeni, desi e o regula si nu o variabila, fiindca asta e
   singura foaie garantat prezenta langa orice modul: toate paisprezece o
   declara ca dependenta. In `frontend.css` ar fi ajuns doar pe paginile cu
   shortcode-uri, adica exact acolo unde CTA-urile sunt mai putine.

   `.cdh-sh__cta--plain` e exclus: e un link, nu un buton.
   ========================================================================== */

.cdh-tc__cta::after,
.cdh-mc__cta::after,
.cdh-cmp__cta::after,
.cdh-sh__cta::after,
.cz-ndcard__btn--cta::after,
.cdh-qz__cta::after,
.cdhl__cta::after,
.cdh-ri__cta::after,
.cdh-mc__review::after,
.cdh-sh__review::after,
.cdh-cta-btn::after,
.cdh-btn-primary::after,
.cerc-mtext a::after {
  content: "";
  display: inline-block;
  /* Cat inaltimea literelor mari, nu cat patratul de font: .72em e inaltimea
     de capitala a fontului folosit, deci caretul se aliniaza cu textul si nu
     pare nici pitic, nici umflat. Latimea pastreaza proportia glifei. */
  height: .72em;
  width: .42em;
  margin-left: .5em;
  /* Aliniat pe mijloc in flex si pe linia de baza in text obisnuit.
     Combinatia nu e aleasa din principii, ci masurata: am pus un marker real
     in butoane si am comparat centrul lui cu centrul inaltimii de capitala,
     pentru patru variante. Rezultatul, in `em` (0 = perfect):

         varianta                         tabel   card   link
         align-self: baseline            -0,240      0  -0,028
         baseline + deplasare -.06em     -0,300      0  -0,088
         center + vertical-align: middle      0      0  +0,059
         center + vertical-align: baseline    0      0  -0,028   <-

     Restul de 0,028em de pe link e sub un sfert de pixel la marimea lui reala.
     `vertical-align` conteaza doar unde butonul NU e flex; `align-self` doar
     unde e. Amandoua sunt scrise ca sa nu depinda de cum e asezat fiecare. */
  align-self: center;
  vertical-align: baseline;
  background: currentColor;
  -webkit-mask: var(--cdh-caret) center / contain no-repeat;
  mask: var(--cdh-caret) center / contain no-repeat;
  flex: 0 0 auto;
}