@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   ContApp Docs — Custom Stylesheet · v4.0 (20 octombrie 2026)
   Documentația arată ca aplicația (design-ul din 12 octombrie, Flux):
   - fontul sistemului (Segoe UI / SF), ca în aplicație; Roboto și
     Roboto Condensed ies;
   - titluri medium 500, zinc-800; hero fără fundal;
   - verdele aplicației: #00AC4E (butoane), #00913F (activ, contoare);
     link-urile din articole rămân pe #007634 (contrast 5,8:1);
   - carduri și panouri cu margine zinc-200, umbră fină, colțuri 12 px;
   - bara laterală ca sidebar-ul aplicației (fundal zinc-50, elementul
     activ alb, cu margine).
   Se încarcă în Docs → Settings → Custom Stylesheet, în locul v3.
   v3 rămâne neatins în Header-Footer-Docs-v2, ca variantă de revenire.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* aceleași valori ca în aplicație (account.contapp.ro, Flux) */
  --capp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";

  --capp-accent:        #00AC4E;   /* --color-accent: butoane */
  --capp-accent-hover:  rgba(0,172,78,.9);
  --capp-accent-content:#00913F;   /* --color-accent-content: activ, contoare, tab-uri */
  --capp-link:          #007634;   /* link-uri în text (AA) */
  --capp-link-hover:    #005C28;
  --capp-mint:          #E8FAEF;   /* brand-50 */

  --capp-ink:     #27272A;   /* zinc-800: titluri, text principal */
  --capp-body:    #3F3F46;   /* zinc-700: text de articol, input */
  --capp-muted-2: #52525C;   /* zinc-600 */
  --capp-muted:   #71717B;   /* zinc-500: text secundar, meniu */
  --capp-faint:   #9F9FA9;   /* zinc-400: placeholder, iconițe */
  --capp-line:    #E4E4E7;   /* zinc-200: margini */
  --capp-line-b:  rgba(212,212,216,.8); /* zinc-300/80: marginea de jos a câmpurilor */
  --capp-soft:    #FAFAFA;   /* zinc-50: suprafețe secundare, sidebar */
  --capp-hover:   rgba(39,39,42,.05);   /* zinc-800/5: hover în meniuri */

  --capp-shadow-xs: 0 1px 2px 0 rgba(0,0,0,.05);
  --capp-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --capp-radius:    12px;   /* carduri */
  --capp-radius-sm: 8px;    /* câmpuri, elemente de meniu */
  --capp-radius-xs: 6px;    /* butoane */
}

/* ─────────────────────────── BAZA ─────────────────────────── */

html{ overflow-x:hidden; }
body{
  font-family:var(--capp-font) !important;
  color:var(--capp-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
/* Tema Help Scout pune Helvetica Neue / Roboto pe titluri, câmpuri și
   butoane, cu selectori pe id. Iconițele (helpscout-docs3) nu sunt atinse. */
body :is(h1,h2,h3,h4,h5,h6,p,li,a,td,th,dd,dt,input,button,select,textarea,label,time,strong,b,em,small,blockquote,div,section,article,aside,nav,header,footer,form,hgroup):not([class*="icon-"]),
body span:not([class*="icon-"]):not(.rating-face){
  font-family:var(--capp-font) !important;
}
h1,h2,h3,h4,h5,h6{ color:var(--capp-ink); font-weight:500; letter-spacing:0; text-shadow:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--capp-accent-content); outline-offset:2px; }

/* ─────────────────── PAGINA PRINCIPALĂ: COLECȚII ȘI CARDURI ─────────────────── */

/* Titlul colecției: ca „Contul tău” din aplicație — 16/24, medium */
.collection-category h2{
  font-size:16px; line-height:24px; font-weight:500; color:var(--capp-ink);
  margin:32px 0 12px; padding:0; border:0; text-align:left;
}
.collection-category h2 a{ color:inherit; text-decoration:none; }
.collection-category h2 a:hover{ color:var(--capp-accent-content); }

/* Grila de carduri: 3 coloane, 16 px între ele, aliniate la titlul colecției
   (tema punea margini laterale pe fiecare card). */
.category-list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  margin:0 0 8px; padding:0;
}
.category-list::before, .category-list::after{ display:none; content:none; }

/* Cardul de categorie: ca un card din aplicație — alb, margine zinc-200,
   umbră fină, colțuri 12 px; la hover fundal zinc-50 (fără ridicare). */
.category-list .category{
  width:auto; margin:0; float:none; display:block;
  padding:104px 0 0 0;
  background-color:#fff;
  background-repeat:no-repeat;
  background-position:50% 18px;
  background-size:76px 76px;
  border:1px solid var(--capp-line);
  border-radius:var(--capp-radius);
  box-shadow:var(--capp-shadow-xs);
  overflow:hidden;
  transform:none;
  transition:background-color .15s ease;
  cursor:pointer;
  text-decoration:none;
}
.category-list .category:hover,
.category-list .category:focus{
  background-color:var(--capp-soft);
  background-repeat:no-repeat !important;
  background-position:50% 18px;
  background-size:76px 76px;
  border-color:var(--capp-line);
  box-shadow:var(--capp-shadow-xs);
  transform:none;
  text-decoration:none;
}
.category-list .category h3,
.category-list .category p{ background-color:transparent; }
.category-list .category h3{
  margin:0; padding:10px 16px 2px; border:0;
  font-size:14px; line-height:20px; font-weight:500; color:var(--capp-ink);
}
.category-list .category p{ margin:0; padding:0 16px; font-size:13px; line-height:20px; color:var(--capp-muted); }
.category-list .category p:not(.article-count):empty{ display:none; }
.category-list .category .article-count{
  margin:2px 0 0; padding:0 16px 16px;
  font-size:13px; line-height:20px; font-weight:500; color:var(--capp-accent-content);
}

/* ===========================================================
   ICONIȚELE CATEGORIILOR — neschimbate față de v3
   Base URL: https://contapp.ro/blog/wp-content/uploads/2026/05/
   =========================================================== */
    /* --- Colecția: Configurare --- */
    #category-188 { /* Prezentare ContApp */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/prezentare-contapp.png);
    }
    #category-183 { /* Cont utilizator */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/cont-utilizator.png);
    }
    #category-189 { /* Setări Firmă */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/setari-firma.png);
    }
    #category-190 { /* Spațiul de documente */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/spatiu-documente.png);
    }
    #category-191 { /* Integrări. Import & export date */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/integrari-import-export.png);
    }
    #category-192 { /* Abonamente ContApp */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/abonamente-contapp.png);
    }

    /* --- Colecția: CRM - Vânzări (NOU) --- */
    #category-239 { /* Generalități CRM */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/crm-generalitati.png);
    }
    #category-240 { /* Magazin produse */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/magazin-produse.png);
    }
    #category-245 { /* Parteneri ContApp */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/parteneri-contapp.png);
    }

    /* --- Colecția: Facturare --- */
    #category-187 { /* Generalități Facturare */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/facturare-generalitati.png);
    }
    #category-185 { /* Facturare clienți */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/facturare-clienti.png);
    }
    #category-186 { /* ContApp e-Factura */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/e-factura.png);
    }

    /* --- Colecția: Contabilitate --- */
    #category-237 { /* Declarații ANAF (NOU) */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/declaratii-anaf.png);
    }
    #category-107 { /* Generalități Contabilitate (Despre contabilitatea în PS) */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/contabilitate-generalitati.png);
    }
    #category-51 { /* Înregistrare venituri (Facturi vânzări) */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/inregistrare-venituri.png);
    }
    #category-52 { /* Înregistrare cheltuieli (Facturi furnizori) */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/inregistrare-cheltuieli.png);
    }
    #category-53 { /* Înregistrare încasări și plăți */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/incasari-plati.png);
    }
    #category-54 { /* Imobilizări & Obiecte de inventar */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/imobilizari-obiecte-inventar.png);
    }
    #category-55 { /* Registre și jurnale contabile */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/registre-jurnale-contabile.png);
    }
    #category-289 { /* Contabilitate în partidă dublă (NOU 2026-09) */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/contabilitate-partida-dubla.png);
    }
    #category-290 { /* Exemple de înregistrări contabile (NOU 2026-09) */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/exemple-inregistrari-contabile.png);
    }
    #category-295 { /* Casă de marcat (NOU 2026-09) */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/casa-de-marcat.png);
    }

    /* --- Colecția: Declarația Unică --- */
    #category-7 { /* Generalități Declarația Unică (Despre Ghid PFA) */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/declaratia-unica-generalitati.png);
    }
    #category-12 { /* Adăugare venituri (Administrare cont) */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/declaratia-unica-adaugare-venituri.png);
    }
    #category-138 { /* Depunere declarație */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/declaratia-unica-depunere.png);
    }

     /* --- Colecția: Modul TVA --- */
    #category-263 { /* Setari TVA */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/setari-tva.png);
    }
    #category-261 { /* Jurnale TVA */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/jurnale-operatiuni-tva.png);
    }
    #category-262 { /* Declaratii */
        background-image: url(https://contapp.ro/blog/wp-content/uploads/2026/05/declaratii-tva.png);
    }

/* Iconițe folosite în HTML-ul articolelor (neschimbate față de v3) */
    i.capp-user {
        content: url(https://api.contapp.ro/images/user.svg?2a33faf2c8fab9cbf92154fbb9710584);
    }

    i.capp-checkmark {
        content: url(https://api.contapp.ro/images/checkmark.svg?3b07f92abd90cbaa3202a797fcbadb0c);
    }

    i.capp-cart {
        content: url(https://api.contapp.ro/images/cart.svg?77e08fabdd6aa7741a441629112003e4);
    }

    i.capp-contapp {
        content: url(https://api.contapp.ro/images/contapp.svg?1e159e02b6be2a6f81df24a5be29228f);
    }

    i.capp-folder {
        content: url(https://api.contapp.ro/images/folder.svg?7637a9866ac0bb11c89cd352487c6718);
    }

    i.capp-gear-mind {
        content: url(https://api.contapp.ro/images/gear-mind.svg?fbeaed7619f76933e957fddd60a47e05);
    }

    i.capp-guide {
        content: url(https://api.contapp.ro/images/guide.svg?f919f53b4892b099facf602ab6ed4dc2);
    }

    i.capp-list-plus {
        content: url(https://api.contapp.ro/images/list-plus.svg?eea052b4e8f6f190d115136502b6531a);
    }

    i.capp-magnifier {
        content: url('https://api.contapp.ro/images/magnifier.svg?622089167c7af76d1866053839656528');
    }

    i.capp-mobile-with-checkmark {
        content: url(https://api.contapp.ro/images/mobile-with-checkmark.svg?20dc170f48e3445b5e3c5de91d121352);
    }

    i.capp-people {
        content: url(https://api.contapp.ro/images/people.svg?21bba19c419dadae4a3c64daf7e05abd);
    }

    i.capp-stopwatch {
        content: url(/images/stopwatch.svg?fe5a816b48ae8b4e6680e1fe1d948bc0);
    }

/* ─────────── Clase folosite în HTML-ul unor articole (din v3) ───────────
   Formularele și butoanele din articole: aceleași valori ca în aplicație. */

.form-control{
  font-style:normal !important; font-weight:400 !important;
  font-size:14px !important; line-height:22px !important;
  padding:8px 12px !important;
  border:1px solid var(--capp-line) !important;
  border-bottom-color:var(--capp-line-b) !important;
  border-radius:var(--capp-radius-sm) !important;
  color:var(--capp-body) !important;
  background:#fff;
  width:100% !important;
  outline:none !important;
  box-shadow:var(--capp-shadow-xs) !important;
}
.form-control:focus{ outline:2px solid var(--capp-ink) !important; outline-offset:-1px; }
.input-group{ padding-right:10px; padding-left:5px; }

.btn{
  font-style:normal; font-weight:500; font-size:14px; line-height:20px;
  padding:6px 12px; border-radius:var(--capp-radius-xs);
  background-image:none; text-shadow:none;
  border:1px solid var(--capp-line); border-bottom-color:var(--capp-line-b);
  background-color:#fff; color:var(--capp-ink);
  box-shadow:var(--capp-shadow-xs);
  transition:background-color .15s ease;
}
.btn:hover, .btn:focus{ background-color:var(--capp-soft); color:var(--capp-ink); box-shadow:var(--capp-shadow-xs); }
.btn-primary, .btn-success{
  color:#fff; width:100%; cursor:pointer; background-image:none;
  background-color:var(--capp-accent);
  border:1px solid rgba(0,0,0,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  padding:8px 12px !important;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus{ color:#fff; background-color:var(--capp-accent-hover); }
.btn-white:focus, .btn-white:hover{ background-color:var(--capp-soft) !important; border-color:var(--capp-line); color:var(--capp-ink); }

.btn-icon, .btn-icon:hover{ background-color:transparent; border:none; box-shadow:none; padding:6px; }
.btn-icon:active{ background-color:transparent; border:2px solid var(--capp-line) !important; box-shadow:none; padding:7px !important; }
.btn-icon .bi{ font-size:24px; color:var(--capp-ink); }

div.dashed{ display:flex; align-items:center; letter-spacing:.1em; }
div.dashed:before, div.dashed:after{
  content:""; height:1px; margin:1rem 0; flex-grow:1;
  background-image:linear-gradient(to right,var(--capp-line) 33%,rgba(255,255,255,0) 0%);
  background-position:bottom; background-size:15px 1px; background-repeat:repeat-x;
}

.mb-3{ margin-bottom:1rem !important; }
.align-items-center{ align-items:center; }
.justify-content-between{ justify-content:space-between !important; }
.justify-content-center{ justify-content:center; }
.col-auto{ width:auto; }
.row:before, .row:after{ display:none; }

@media screen and (max-width:770px){
  .input-group{ padding:.5rem 0 !important; }
}

/* butonul vechi „Mergi la aplicație”, dacă mai apare în vreun articol */
.mergi_aplicatie{
  font-style:normal !important; font-size:14px !important; font-weight:500 !important;
  border:1px solid rgba(0,0,0,.1) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2) !important;
  background-color:var(--capp-accent) !important; color:#fff !important;
  border-radius:var(--capp-radius-xs) !important;
  padding:6px 12px !important; line-height:20px !important;
  display:inline-block !important; font-family:inherit !important;
  cursor:pointer !important; text-decoration:none !important;
  transition:background-color .15s ease !important;
}
.mergi_aplicatie:hover{ background-color:var(--capp-accent-hover) !important; color:#fff !important; }

.position-absolute{ position:absolute !important; z-index:0 !important; }
#sidebar form .search-query{ display:initial !important; }

/* ─────────── Utilitare Bootstrap folosite în articole (neschimbate față de v3) ─────────── */
    /* BOOTSTRAP CLASSES */

    .pt-0{
        padding-top:0!important
    }
    .pt-1{
        padding-top:.25rem!important
    }
    .pt-2{
        padding-top:.5rem!important
    }
    .pt-3{
        padding-top:1rem!important
    }
    .pt-4{
        padding-top:1.5rem!important
    }
    .pt-5{
        padding-top:3rem!important
    }
    .mt-0{
        margin-top:0!important
    }
    .mt-1{
        margin-top:.25rem!important
    }
    .mt-2{
        margin-top:.5rem!important
    }
    .mt-3{
        margin-top:1rem!important
    }
    .mt-4{
        margin-top:1.5rem!important
    }
    .mt-5{
        margin-top:3rem!important
    }
    .row{
        --bs-gutter-x:1.5rem;
        --bs-gutter-y:0;
        display:flex;
        flex-wrap:wrap;
        margin-left:calc(var(--bs-gutter-x)*-.5);
        margin-right:calc(var(--bs-gutter-x)*-.5);
        margin-top:calc(var(--bs-gutter-y)*-1)
    }
    .row>*{
        flex-shrink:0;
        margin-top:var(--bs-gutter-y);
        max-width:100%;
        padding-left:calc(var(--bs-gutter-x)*.5);
        padding-right:calc(var(--bs-gutter-x)*.5);
        width:100%
    }
    .col{
        flex:1 0 0%
    }
    .row-cols-auto>*{
        flex:0 0 auto;
        width:auto
    }
    .row-cols-1>*{
        flex:0 0 auto;
        width:100%
    }
    .row-cols-2>*{
        flex:0 0 auto;
        width:50%
    }
    .row-cols-3>*{
        flex:0 0 auto;
        width:33.3333333333%
    }
    .row-cols-4>*{
        flex:0 0 auto;
        width:25%
    }
    .row-cols-5>*{
        flex:0 0 auto;
        width:20%
    }
    .row-cols-6>*{
        flex:0 0 auto;
        width:16.6666666667%
    }
    @media (min-width:768px){
        .col-md{
            flex:1 0 0%
        }
        .row-cols-md-auto>*{
            flex:0 0 auto;
            width:auto
        }
        .row-cols-md-1>*{
            flex:0 0 auto;
            width:100%
        }
        .row-cols-md-2>*{
            flex:0 0 auto;
            width:50%
        }
        .row-cols-md-3>*{
            flex:0 0 auto;
            width:33.3333333333%
        }
        .row-cols-md-4>*{
            flex:0 0 auto;
            width:25%
        }
        .row-cols-md-5>*{
            flex:0 0 auto;
            width:20%
        }
        .row-cols-md-6>*{
            flex:0 0 auto;
            width:16.6666666667%
        }
        .col-md-auto{
            flex:0 0 auto;
            width:auto
        }
        .col-md-1{
            flex:0 0 auto;
            width:8.33333333%
        }
        .col-md-2{
            flex:0 0 auto;
            width:16.66666667%
        }
        .col-md-3{
            flex:0 0 auto;
            width:25%
        }
        .col-md-4{
            flex:0 0 auto;
            width:33.33333333%
        }
        .col-md-5{
            flex:0 0 auto;
            width:41.66666667%
        }
        .col-md-6{
            flex:0 0 auto;
            width:50%
        }
        .col-md-7{
            flex:0 0 auto;
            width:58.33333333%
        }
        .col-md-8{
            flex:0 0 auto;
            width:66.66666667%
        }
        .col-md-9{
            flex:0 0 auto;
            width:75%
        }
        .col-md-10{
            flex:0 0 auto;
            width:83.33333333%
        }
        .col-md-11{
            flex:0 0 auto;
            width:91.66666667%
        }
        .col-md-12{
            flex:0 0 auto;
            width:100%
        }
    }

    @media (min-width:992px){
        .col-lg{
            flex:1 0 0%
        }
        .row-cols-lg-auto>*{
            flex:0 0 auto;
            width:auto
        }
        .row-cols-lg-1>*{
            flex:0 0 auto;
            width:100%
        }
        .row-cols-lg-2>*{
            flex:0 0 auto;
            width:50%
        }
        .row-cols-lg-3>*{
            flex:0 0 auto;
            width:33.3333333333%
        }
        .row-cols-lg-4>*{
            flex:0 0 auto;
            width:25%
        }
        .row-cols-lg-5>*{
            flex:0 0 auto;
            width:20%
        }
        .row-cols-lg-6>*{
            flex:0 0 auto;
            width:16.6666666667%
        }
        .col-lg-auto{
            flex:0 0 auto;
            width:auto
        }
        .col-lg-1{
            flex:0 0 auto;
            width:8.33333333%
        }
        .col-lg-2{
            flex:0 0 auto;
            width:16.66666667%
        }
        .col-lg-3{
            flex:0 0 auto;
            width:25%
        }
        .col-lg-4{
            flex:0 0 auto;
            width:33.33333333%
        }
        .col-lg-5{
            flex:0 0 auto;
            width:41.66666667%
        }
        .col-lg-6{
            flex:0 0 auto;
            width:50%
        }
        .col-lg-7{
            flex:0 0 auto;
            width:58.33333333%
        }
        .col-lg-8{
            flex:0 0 auto;
            width:66.66666667%
        }
        .col-lg-9{
            flex:0 0 auto;
            width:75%
        }
        .col-lg-10{
            flex:0 0 auto;
            width:83.33333333%
        }
        .col-lg-11{
            flex:0 0 auto;
            width:91.66666667%
        }
        .col-lg-12{
            flex:0 0 auto;
            width:100%
        }
    }

    @media (min-width:1200px){
        .col-xl{
            flex:1 0 0%
        }
        .row-cols-xl-auto>*{
            flex:0 0 auto;
            width:auto
        }
        .row-cols-xl-1>*{
            flex:0 0 auto;
            width:100%
        }
        .row-cols-xl-2>*{
            flex:0 0 auto;
            width:50%
        }
        .row-cols-xl-3>*{
            flex:0 0 auto;
            width:33.3333333333%
        }
        .row-cols-xl-4>*{
            flex:0 0 auto;
            width:25%
        }
        .row-cols-xl-5>*{
            flex:0 0 auto;
            width:20%
        }
        .row-cols-xl-6>*{
            flex:0 0 auto;
            width:16.6666666667%
        }
        .col-xl-auto{
            flex:0 0 auto;
            width:auto
        }
        .col-xl-1{
            flex:0 0 auto;
            width:8.33333333%
        }
        .col-xl-2{
            flex:0 0 auto;
            width:16.66666667%
        }
        .col-xl-3{
            flex:0 0 auto;
            width:25%
        }
        .col-xl-4{
            flex:0 0 auto;
            width:33.33333333%
        }
        .col-xl-5{
            flex:0 0 auto;
            width:41.66666667%
        }
        .col-xl-6{
            flex:0 0 auto;
            width:50%
        }
        .col-xl-7{
            flex:0 0 auto;
            width:58.33333333%
        }
        .col-xl-8{
            flex:0 0 auto;
            width:66.66666667%
        }
        .col-xl-9{
            flex:0 0 auto;
            width:75%
        }
        .col-xl-10{
            flex:0 0 auto;
            width:83.33333333%
        }
        .col-xl-11{
            flex:0 0 auto;
            width:91.66666667%
        }
        .col-xl-12{
            flex:0 0 auto;
            width:100%
        }
    }
    @media (min-width:1400px){
        .col-xxl{
            flex:1 0 0%
        }
        .row-cols-xxl-auto>*{
            flex:0 0 auto;
            width:auto
        }
        .row-cols-xxl-1>*{
            flex:0 0 auto;
            width:100%
        }
        .row-cols-xxl-2>*{
            flex:0 0 auto;
            width:50%
        }
        .row-cols-xxl-3>*{
            flex:0 0 auto;
            width:33.3333333333%
        }
        .row-cols-xxl-4>*{
            flex:0 0 auto;
            width:25%
        }
        .row-cols-xxl-5>*{
            flex:0 0 auto;
            width:20%
        }
        .row-cols-xxl-6>*{
            flex:0 0 auto;
            width:16.6666666667%
        }
    }

    .list-inline,.list-unstyled{
        list-style:none;
        padding-left:0
    }

    .my-1{
        margin-bottom:.25rem!important;
        margin-top:.25rem!important
    }
    .mb-4{
        margin-bottom:1.5rem!important
    }


/* ═══════════════════════════════════════════════════════════════════
   HEADER · HERO · CONȚINUT · FOOTER
   Structura (clasele capp-*) vine din Custom Code (1-custom-code-v3.html),
   care rămâne valabil cu v4.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── HEADER ─────────────────────────── */
/* Ca bara de sus din aplicație: albă, 56 px, margine jos zinc-200, fără umbră. */

#mainNav, #mainNav .navbar-inner{
  background:#fff !important; background-image:none !important;
  border:0; box-shadow:none !important; filter:none;
}
#mainNav .navbar-inner{ border-bottom:1px solid var(--capp-line) !important; min-height:56px; }

/* Lățime comună pentru bara de navigație, hero și conținut */
#mainNav .navbar-inner > .container-fluid,
#docsSearch h1.container-fluid,
#searchBar.container-fluid,
#contentArea.container-fluid{ max-width:1180px; }

#mainNav .navbar-inner > .container-fluid{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-height:56px; padding:0 16px !important;
}
#mainNav .brand{ order:1; float:none; margin:0 8px 0 0; padding:0; display:flex; align-items:center; }
#mainNav .brand img{ width:auto; height:20px; }
#mainNav .nav-collapse{ order:2; flex:1 1 auto; }
#mainNav .capp-actions{ order:3; margin-left:auto; display:flex; align-items:center; gap:8px; }
#mainNav .btn-navbar{ order:4; float:none; margin:0; position:static !important; }

#mainNav ul.nav{
  position:static !important;
  display:flex; align-items:center; flex-wrap:wrap; gap:2px;
  width:auto; max-width:none; margin:0; padding:0;
  left:auto; right:auto; transform:none;
}
#mainNav ul.nav > li{ display:flex; align-items:center; margin:0; }
#mainNav ul.nav > li#contactMobile{ display:none; }

/* Elementele de meniu: ca în aplicație — zinc-500, la hover zinc-800 pe
   fundal zinc-800/5, activ în verdele aplicației. */
#mainNav ul.nav > li > a{
  display:flex; align-items:center;
  height:32px; padding:0 10px; margin:0;
  border-radius:var(--capp-radius-sm);
  font-size:14px; line-height:20px; font-weight:500;
  color:var(--capp-muted); text-decoration:none; text-shadow:none;
  background:transparent; box-shadow:none;
  transition:background-color .15s ease, color .15s ease;
}
#mainNav ul.nav > li > a:hover,
#mainNav ul.nav > li > a:focus{ color:var(--capp-ink); background:var(--capp-hover); }
#mainNav ul.nav > li.active > a,
#mainNav ul.nav > li.active > a:hover{ color:var(--capp-accent-content); background:var(--capp-hover); }
#mainNav ul.nav > li > a.contactUs{ margin:0; }

/* hamburger (telefon) */
#mainNav .btn-navbar{
  height:32px; padding:0 9px; border-radius:var(--capp-radius-xs);
  background:#fff; border:1px solid var(--capp-line); box-shadow:var(--capp-shadow-xs);
}
#mainNav .btn-navbar .icon-bar{ background-color:var(--capp-ink); box-shadow:none; }

/* butoanele din header: aceleași ca în aplicație */
.capp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 12px; border-radius:var(--capp-radius-xs);
  font-size:14px; font-weight:500; line-height:20px;
  border:1px solid transparent; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.capp-btn:focus-visible{ outline:2px solid var(--capp-accent-content); outline-offset:2px; }
.capp-btn-ghost{
  background:#fff; color:var(--capp-ink);
  border-color:var(--capp-line); border-bottom-color:var(--capp-line-b);
  box-shadow:var(--capp-shadow-xs);
}
.capp-btn-ghost:hover,
.capp-btn-ghost:focus{ background:var(--capp-soft); color:var(--capp-ink); text-decoration:none; }
.capp-btn-primary{
  background:var(--capp-accent); color:#fff;
  border-color:rgba(0,0,0,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.capp-btn-primary:hover,
.capp-btn-primary:focus{ background:var(--capp-accent-hover); color:#fff; text-decoration:none; }
.capp-btn-short{ display:none; }

/* ─────────────────────────── HERO ─────────────────────────── */
/* Fără fundal: titlul și căutarea stau pe alb, ca antetul unei pagini
   din aplicație („Bine ai venit la ContApp”). */

#docsSearch,
#docsSearch.capp-hero{
  background:transparent !important; background-image:none !important;
  border:0 !important; box-shadow:none !important;
  min-height:0;
  padding:40px 0 0 !important;
  margin:0;
}
#docsSearch h1{
  position:relative;
  color:var(--capp-ink) !important;
  font-size:24px; line-height:32px; font-weight:500;
  text-align:left !important; text-shadow:none;
  margin:0 auto 16px !important; padding-top:0;
}

#searchBar{ width:100% !important; position:relative; }
#docsSearch #searchBar{ padding-top:0 !important; padding-bottom:0 !important; }
#docsSearch .search-query{
  height:40px; padding:0 12px;
  border:1px solid var(--capp-line); border-bottom-color:var(--capp-line-b); border-right:0;
  border-radius:var(--capp-radius-sm) 0 0 var(--capp-radius-sm);
  background:#fff; box-shadow:var(--capp-shadow-xs);
  font-size:14px; line-height:22px; color:var(--capp-body);
}
#docsSearch .search-query::placeholder{ color:var(--capp-faint); }
#docsSearch .search-query:focus{
  border-color:var(--capp-line); box-shadow:var(--capp-shadow-xs);
  outline:2px solid var(--capp-ink); outline-offset:-1px;
}

/* Butonul „Caută”: ca butonul principal al aplicației, lipit de câmp. */
#searchBar button,
#docsSearch #searchBar button{
  position:absolute; top:0 !important; right:0;
  height:40px; padding:0 16px;
  background:var(--capp-accent) !important;
  border:1px solid rgba(0,0,0,.1) !important;
  border-radius:0 var(--capp-radius-sm) var(--capp-radius-sm) 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  color:#fff; text-shadow:none;
  font-size:14px; font-weight:500; line-height:20px;
  transition:background-color .15s ease;
}
#searchBar button:hover,
#docsSearch #searchBar button:hover{ background:var(--capp-accent-hover) !important; border-color:rgba(0,0,0,.1) !important; }
#searchBar button .icon-search{ color:#fff; }

/* Sugestiile de căutare (lista care se deschide sub câmp) */
#serp-dd{
  background:#fff; border:1px solid var(--capp-line); border-radius:var(--capp-radius-sm);
  box-shadow:var(--capp-shadow-md); overflow:hidden; margin-top:4px;
}
#serp-dd .result{ margin:0; padding:4px; }
#serp-dd .result li, #serp-dd .result a{ font-size:14px; line-height:20px; color:var(--capp-ink); border:0; }
#serp-dd .result a{ display:block; padding:8px 10px; border-radius:6px; text-decoration:none; }
#serp-dd .result a:hover, #serp-dd .result li.active a{ background:var(--capp-soft); color:var(--capp-ink); }

/* ─────────────────────────── CONȚINUT ─────────────────────────── */

#contentArea{ padding-top:8px; }

/* Cardul articolului / al listei: card din aplicație */
.contentWrapper{
  background:#fff;
  border:1px solid var(--capp-line); border-radius:var(--capp-radius);
  box-shadow:var(--capp-shadow-xs);
}

/* Bara laterală: ca sidebar-ul aplicației — fundal zinc-50, margine,
   elementul activ alb cu margine și text verde. */
#sidebar{
  background:var(--capp-soft);
  border:1px solid var(--capp-line); border-radius:var(--capp-radius);
  padding:16px 12px;
}
#sidebar form#searchBar{ padding:0 !important; margin:0 0 12px; width:100% !important; }
#sidebar .search-query{
  height:32px; padding:0 30px 0 10px;
  background:#fff;
  border:1px solid var(--capp-line); border-bottom-color:var(--capp-line-b);
  border-radius:var(--capp-radius-sm); box-shadow:var(--capp-shadow-xs);
  font-size:14px; color:var(--capp-body);
}
#sidebar .search-query::placeholder{ color:var(--capp-faint); }
#sidebar .search-query:focus{ outline:2px solid var(--capp-ink); outline-offset:-1px; box-shadow:var(--capp-shadow-xs); }
/* butonul de căutare din bara laterală e doar iconița lupei */
#sidebar #searchBar button{
  position:absolute; right:4px !important; top:0 !important;
  height:32px; width:28px; padding:0;
  background:transparent !important; border:0 !important; box-shadow:none;
  border-radius:0;
}
#sidebar #searchBar button:hover{ background:transparent !important; }
#sidebar #searchBar button .icon-search{ color:var(--capp-faint); }

#sidebar h3{
  font-size:12px; line-height:16px; font-weight:500;
  color:var(--capp-muted); text-transform:none; letter-spacing:0;
  margin:16px 10px 6px; padding:0; border:0;
}
#sidebar .nav-list{ margin:0; padding:0; }
#sidebar .nav-list li{ margin:0 0 1px; padding:0; }
#sidebar .nav-list a{
  display:flex; align-items:center; gap:6px;
  min-height:30px; padding:5px 10px; margin:0;
  border:1px solid transparent; border-radius:var(--capp-radius-sm);
  font-size:14px; line-height:20px; font-weight:400;
  color:var(--capp-muted); text-decoration:none; text-shadow:none;
  background:transparent;
  transition:background-color .15s ease, color .15s ease;
}
#sidebar .nav-list a:hover{ color:var(--capp-ink); background:var(--capp-hover); font-weight:400; }
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover{
  color:var(--capp-accent-content); font-weight:500;
  background:#fff; border-color:var(--capp-line); box-shadow:var(--capp-shadow-xs);
}
#sidebar .nav-list .active a i{ color:var(--capp-accent-content); margin-left:auto; }

/* ─────────────── Pagina de categorie / colecție / rezultate ─────────────── */

#categoryHead h1, .contentWrapper > h1, #serp h1{
  font-size:24px; line-height:32px; font-weight:500; color:var(--capp-ink); margin:0 0 4px;
}
#categoryHead .descrip, #serp .articlesFound{ font-size:14px; line-height:20px; color:var(--capp-muted); margin:0 0 16px; }
#categoryHead .sort select{
  height:32px; padding:0 8px; font-size:14px; color:var(--capp-body);
  background-color:#fff;
  border:1px solid var(--capp-line); border-bottom-color:var(--capp-line-b);
  border-radius:var(--capp-radius-sm); box-shadow:var(--capp-shadow-xs);
}
.articleList{ margin:0; padding:0; }
.articleList li{ margin:0; padding:0; border:0; list-style:none; }
.contentWrapper .articleList li a,
.articleList li a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin:0 -10px;
  border-radius:var(--capp-radius-sm);
  font-size:15px; line-height:22px; font-weight:400;
  color:var(--capp-ink); text-decoration:none;
}
.contentWrapper .articleList li a:hover,
.articleList li a:hover{ background:var(--capp-soft); color:var(--capp-accent-content); }
.articleList li a i{ color:var(--capp-faint); }
#serp .articleList li{ padding:6px 0 10px; border-bottom:1px solid var(--capp-line); }
#serp .articleList li:last-child{ border-bottom:0; }
/* tema pune #serp li a pe 18 px, inline-block — de aici selectorul cu id */
#serp .articleList li a{
  display:inline-flex; margin:0; padding:2px 0;
  font-size:15px; line-height:22px; font-weight:500; color:var(--capp-ink);
}
#serp .articleList li a:hover{ background:transparent; color:var(--capp-accent-content); }
#serp .articleList li p{ margin:2px 0 0; font-size:14px; line-height:20px; color:var(--capp-muted); }

.pagination ul{ box-shadow:none; }
.pagination ul > li > a, .pagination ul > li > span{
  min-width:32px; height:32px; line-height:30px; padding:0 8px; margin:0 2px; text-align:center;
  border:1px solid var(--capp-line) !important; border-radius:var(--capp-radius-xs) !important;
  color:var(--capp-ink); background:#fff; font-size:14px;
}
.pagination ul > li > a:hover{ background:var(--capp-soft); }
.pagination ul > .active > a, .pagination ul > .active > span{
  background:var(--capp-accent); border-color:rgba(0,0,0,.1) !important; color:#fff;
}

/* ─────────────────────────── ARTICOL ─────────────────────────── */

/* Titluri: medium 500, zinc-800 — scara aplicației (24 / 18 / 16) */
#fullArticle h1, #fullArticle .title, #main-content h1{
  font-size:24px; line-height:32px; font-weight:500; color:var(--capp-ink);
}
#fullArticle .title{ margin:0 0 20px; padding-right:28px; }
#fullArticle h2{ font-size:18px; line-height:26px; font-weight:500; color:var(--capp-ink); margin:36px 0 10px; }
#fullArticle h3{ font-size:16px; line-height:24px; font-weight:500; color:var(--capp-ink); margin:28px 0 8px; }
#fullArticle h4{ font-size:14px; line-height:20px; font-weight:500; color:var(--capp-ink); margin:20px 0 6px; }

/* Corpul: 15/24, zinc-700 (cu un pixel peste textul din aplicație, pentru citit) */
#fullArticle, #fullArticle p, #fullArticle li, #fullArticle td,
#fullArticle dd, #fullArticle blockquote,
.article-body, .article-body p, .article-body li{
  font-size:15px; line-height:24px; color:var(--capp-body);
}
#fullArticle strong, #fullArticle b{ font-weight:600; color:var(--capp-ink); }

/* Link-uri în text: verde AA, subliniere discretă ca link-urile Flux */
#fullArticle a, .contentWrapper p a, .contentWrapper li a{
  color:var(--capp-link); font-weight:500;
  text-decoration:underline; text-decoration-color:rgba(0,118,52,.3);
  text-underline-offset:3px; text-decoration-thickness:1px;
}
#fullArticle a:hover, .contentWrapper p a:hover, .contentWrapper li a:hover{
  color:var(--capp-link-hover); text-decoration-color:currentColor;
}
/* un <strong> în interiorul unui link păstrează culoarea link-ului */
#fullArticle a strong, #fullArticle a b{ color:inherit; font-weight:600; }
/* butoanele din articol nu primesc stilul de link */
#fullArticle a.btn, #fullArticle a.admin-edit, #fullArticle a.printArticle,
#fullArticle a.mergi_aplicatie, .contentWrapper .articleList a{ text-decoration:none; }
#fullArticle a.admin-edit{ color:var(--capp-ink); font-size:13px; padding:4px 10px; }
#fullArticle .printArticle{ color:var(--capp-faint); }
#fullArticle .printArticle:hover{ color:var(--capp-ink); }

/* Imagini și capturi: margine zinc-200, colțuri 8 px */
#fullArticle img{ border:1px solid var(--capp-line); border-radius:var(--capp-radius-sm); box-shadow:none; }

/* Casete Help Scout: ca alertele din aplicație — fundal nuanțat,
   margine de jur împrejur, colțuri 8 px; textul rămâne zinc-800. */
#fullArticle .callout-yellow, #fullArticle .callout-red,
#fullArticle .callout-green, #fullArticle .callout-blue, #fullArticle .callout{
  color:var(--capp-ink);
  border:1px solid; border-radius:var(--capp-radius-sm);
  padding:12px 16px; margin:16px 0;
}
#fullArticle .callout-yellow{ background:#FFFBEB; border-color:rgba(250,188,0,.45); }
#fullArticle .callout-red   { background:#FEF2F2; border-color:rgba(251,44,54,.3); }
#fullArticle .callout-green { background:var(--capp-mint); border-color:rgba(0,172,78,.3); }
#fullArticle .callout-blue,
#fullArticle .callout       { background:#F0F9FF; border-color:rgba(0,165,234,.3); }
#fullArticle .callout-yellow p, #fullArticle .callout-red p,
#fullArticle .callout-green p, #fullArticle .callout-blue p, #fullArticle .callout p{ color:var(--capp-ink); margin-bottom:0; }
#fullArticle .callout-yellow p + p, #fullArticle .callout-red p + p,
#fullArticle .callout-green p + p, #fullArticle .callout-blue p + p, #fullArticle .callout p + p{ margin-top:8px; }

/* Tabele */
#fullArticle table, #fullArticle .hs-table{ border-collapse:collapse; border:1px solid var(--capp-line); }
#fullArticle th, #fullArticle td{ border:1px solid var(--capp-line); padding:8px 12px; font-size:14px; line-height:20px; }
#fullArticle th{ background:var(--capp-soft); color:var(--capp-ink); font-weight:500; }

/* Cod */
#fullArticle code{ background:var(--capp-soft); border:1px solid var(--capp-line); border-radius:4px; color:var(--capp-ink); padding:1px 4px; }

/* Evaluarea articolului */
.articleRatings{
  background:var(--capp-soft);
  border:1px solid var(--capp-line); border-radius:var(--capp-radius);
  color:var(--capp-muted); font-size:14px; box-shadow:none;
}
.articleRatings-question{ color:var(--capp-ink); font-weight:500; }

/* Subsolul articolului („Contactează-ne!”, data actualizării) */
.articleFoot{ border-top:1px solid var(--capp-line); }
.articleFoot, .articleFoot p, .articleFoot .lu{ font-size:13px; color:var(--capp-muted); }
.articleFoot .contactUs{ color:var(--capp-accent-content); font-weight:500; text-decoration:none; }
.articleFoot .contactUs:hover{ text-decoration:underline; }
.articleFoot i{ color:var(--capp-faint); }

/* Articole înrudite / populare */
.related h3, .most-pop-articles h2{ font-size:16px; line-height:24px; font-weight:500; color:var(--capp-ink); }
.related ul a, .most-pop-articles .popArticles a{ color:var(--capp-ink); text-decoration:none; }
.related ul a:hover, .most-pop-articles .popArticles a:hover{ color:var(--capp-accent-content); }
.collection a{ color:var(--capp-accent-content); }

/* ─────────────────────────── FOOTER ─────────────────────────── */
/* Aplicația nu are subsol; aici îl facem discret: fundal zinc-50,
   text mic zinc-500, fără blocuri închise la culoare. */

footer{ margin-top:48px; }
.capp-footer{ color:var(--capp-ink); }
.capp-footer, .capp-footer div, .capp-footer p,
.capp-footer h2, .capp-footer li, .capp-footer a{ text-align:left !important; }
.capp-foot-in{ max-width:1180px; margin:0 auto; padding:0 16px; }

.capp-foot-cta{ background:#fff; border-top:1px solid var(--capp-line); }
.capp-foot-cta-in{
  max-width:1180px; margin:0 auto; padding:20px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.capp-foot-cta p{ margin:0; font-size:14px; line-height:20px; color:var(--capp-muted); }
.capp-foot-cta strong{ color:var(--capp-ink); font-weight:500; }

.capp-foot-main{ background:var(--capp-soft); padding:36px 0 28px; border-top:1px solid var(--capp-line); }
.capp-foot-main .capp-foot-in{ display:flex; gap:48px; flex-wrap:wrap; align-items:flex-start; }
.capp-foot-brand{ flex:0 0 260px; max-width:100%; }
.capp-foot-brand img{ height:20px; width:auto; }
.capp-foot-brand p{ margin:10px 0 16px; font-size:13px; line-height:20px; color:var(--capp-muted); }

.capp-soc-row{ display:flex; gap:8px; }
.capp-soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--capp-radius-sm);
  background:#fff; color:var(--capp-muted-2);
  border:1px solid var(--capp-line); box-shadow:var(--capp-shadow-xs);
  text-decoration:none;
  transition:color .15s ease, background-color .15s ease;
}
.capp-soc svg{ width:16px; height:16px; }
.capp-soc:hover{ color:var(--capp-accent-content); background:#fff; text-decoration:none; transform:none; }
.capp-soc:focus-visible{ outline:2px solid var(--capp-accent-content); outline-offset:2px; }

.capp-foot-cols{ flex:1 1 520px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.capp-foot-title{
  margin:0 0 10px; font-size:13px; font-weight:500; line-height:20px;
  color:var(--capp-ink); border:0; padding:0;
}
.capp-foot-cols ul{ margin:0; padding:0; list-style:none; }
.capp-foot-cols li{ margin:0 0 6px; list-style:none; }
.capp-foot-cols a{ font-size:13px; line-height:20px; color:var(--capp-muted); text-decoration:none; }
.capp-foot-cols a:hover{ color:var(--capp-ink); text-decoration:none; }

.capp-foot-bottom{ background:var(--capp-soft); border-top:1px solid var(--capp-line); padding:14px 0; }
.capp-foot-bottom .capp-foot-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.capp-foot-bottom p{ margin:0; font-size:12px; color:var(--capp-muted); }
.capp-foot-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.capp-foot-legal a{ font-size:12px; color:var(--capp-muted); text-decoration:none; }
.capp-foot-legal a:hover{ color:var(--capp-ink); }

/* linia „© … Powered by Help Scout” (pe home <footer> are clasa center) */
footer > p:first-child{ display:none; }
/* vechiul container de fundal, dacă mai rămâne prin cache */
.header_background{ display:none !important; }

/* ─────────────────────── RESPONSIVE ─────────────────────── */

@media screen and (max-width:1100px){
  #docsSearch #searchBar{ width:100% !important; margin:0 !important; }
}
@media (max-width:980px){
  .capp-foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .category-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

  #mainNav .navbar-inner > .container-fluid{ gap:8px; }
  #mainNav .capp-actions{ order:3; }
  #mainNav .btn-navbar{ order:4; }
  #mainNav .nav-collapse{ order:5; flex:0 0 100%; }
  #mainNav ul.nav{ flex-direction:column; align-items:stretch; padding:4px 0 8px; }
  #mainNav ul.nav > li > a{ height:36px; padding:0 10px; }
  #mainNav ul.nav > li#contact{ display:none; }
  #mainNav ul.nav > li#contactMobile{ display:flex; }

  #mainNav .navbar-inner > .container-fluid{ padding:0 !important; }

  #docsSearch, #docsSearch.capp-hero{ padding:24px 0 0 !important; }
  #docsSearch h1{ font-size:20px; line-height:28px; padding-left:0 !important; padding-right:0 !important; }

  #sidebar{ margin-top:16px; }
  #fullArticle .title{ font-size:20px; line-height:28px; }
  #fullArticle h2{ font-size:17px; line-height:24px; }
  #fullArticle, #fullArticle p, #fullArticle li, #fullArticle td{ font-size:15px; line-height:23px; }

  .capp-foot-main .capp-foot-in{ gap:32px; }
  .capp-foot-brand{ flex:1 1 100%; }
  .capp-foot-cta-in{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:600px){
  .nav{ flex-direction:column; }
}
@media (max-width:520px){
  .capp-btn-ghost{ display:none; }
  .capp-btn-short{ display:inline; }
  .capp-btn-full{ display:none; }
  .capp-foot-cols{ grid-template-columns:1fr; gap:24px; }
  .capp-foot-bottom .capp-foot-in{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px){
  /* pe telefon cardul devine un rând: iconița în stânga, textul în dreapta */
  .category-list{ grid-template-columns:1fr; gap:8px; }
  .category-list .category,
  .category-list .category:hover,
  .category-list .category:focus{
    padding:12px 14px 12px 72px;
    background-position:12px 50%; background-size:48px 48px;
    text-align:left; min-height:72px;
  }
  .category-list .category h3,
  .category-list .category p,
  .category-list .category .article-count{ padding:0; text-align:left; }
  #searchBar button span{ display:none !important; }
  #searchBar button .icon-search{ color:#fff; }
}

@media (prefers-reduced-motion: reduce){
  .category-list .category, .capp-btn, .capp-soc, #mainNav ul.nav > li > a, #sidebar .nav-list a{
    transition:none !important; transform:none !important;
  }
}