/* ======================================================================
   ZDR – PODOBA 2026 (estetska prenova portala), 16. 9. 2026
   ======================================================================

   Samo videz. Nobene spremembe v delovanju, poteh ali vsebini.
   Datoteka se naloži ZA `style.css`, zato vedno zmaga nad njim.

   Vir: dizajn naslovnice, ki ga je Miha predal 16. 9. 2026
   (`zaposlitev-dev-klon-nov-dizajn.html`, razpakiran v delovno mapo).

   Nadaljuje delo korakov 430–432 (žetoni `--zi-*` so že v `style.css`).
   Tu so samo tisti deli, ki jih tisti koraki niso zajeli: postavitev,
   razmiki, obrobe in stanja.

   Povrnitev: zakomentiraj `require_once .../inc/podoba-2026.php;`
   v `functions.php`. Nič drugega ni treba.
   Varnostna kopija pred posegom:
   ~/varnostne-kopije/2026-09-16-klon-PRED-PRENOVO/
   ====================================================================== */


/* ======================================================================
   1) ŽETONI, KI JIH KORAK 430 NI IMEL
   ====================================================================== */

:root {
    /* velikosti pisave – rastejo z zaslonom, brez skokov */
    --zi-h1: clamp(32px, 24px + 2.4vw, 52px);
    --zi-h2: clamp(26px, 21px + 1.4vw, 36px);
    --zi-h3: clamp(19px, 17.5px + .6vw, 24px);
    --zi-h4: clamp(17px, 16px + .3vw, 19px);
    --zi-body: clamp(16px, 15px + .2vw, 17px);
    --zi-small: 14px;
    --zi-eyebrow: 12px;

    /* širina vsebine in ritem razmikov med sekcijami */
    --zi-max: 1440px;
    --zi-gutter: 24px;
    --zi-sekcija: clamp(48px, 7vw, 96px);

    /* vzorec pik na temni ploskvi */
    --zi-vzorec:
        radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px),
        radial-gradient(60% 80% at 100% 0%, rgba(29,111,232,.42), transparent 60%),
        radial-gradient(45% 70% at 0% 100%, rgba(31,191,176,.24), transparent 60%);

    /* pisava za datume in drobne oznake */
    --zi-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Datumi in drobne oznake v enoširinski pisavi. Gostimo jo sami – zunanjih
   virov (Google Fonts) portal ne kliče, ker nima privolitve za piškotke. */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(pisave/jetbrains-mono-latin-400.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(pisave/jetbrains-mono-latin-ext-400.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}


/* ======================================================================
   2) GLAVA
   ----------------------------------------------------------------------
   Nižja, mirnejša, s prosojno belo podlago. Meni izgubi krepko modro in
   postane siv; poudarek nosita samo »Paketi« in »Objavi oglas«.
   ====================================================================== */

#apus-header.apus-header {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--zi-gray-200);
    box-shadow: none;
}

#apus-header .main-sticky-header,
#apus-header .elementor-element-82fe2a5 {
    background: transparent;
}

/* logotip: okrogla štampiljka, Mihova zahteva 16. 9. – 50 % večja od prvega poskusa */
#apus-header .logo,
#apus-header .logo a,
#apus-header .logo .logo-main {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

#apus-header .logo img {
    max-height: 111px !important;
    width: auto !important;
    height: auto !important;
}

/* --- razporeditev v glavi -------------------------------------------- */
/* Meni sme skrčiti, gumba desno ne. Prej je meni pojedel prostor in
   »Objavi oglas« ter »Prijava« sta zlezla čez rob. */
#apus-header .elementor-element-82fe2a5 {
    padding: 14px var(--zi-gutter);
    gap: 16px;
    align-items: center;
    flex-wrap: nowrap;
}

#apus-header .elementor-element-a673893,
#apus-header .elementor-element-840b1a4,
#apus-header .elementor-element-941551f {
    flex: none;
}

#apus-header .elementor-element-1e227f1 {
    flex: 1 1 auto;
    min-width: 0;
}

#apus-header .main-menu.menu-center {
    display: flex;
    justify-content: flex-end;
}

#apus-header #primary-menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
}

/* --- meni ------------------------------------------------------------ */
#apus-header #primary-menu > li > a {
    font-family: var(--zi-font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--zi-gray-700);
    padding: 10px 9px;
    border-radius: var(--zi-radius-pill);
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

#apus-header #primary-menu > li > a:hover,
#apus-header #primary-menu > li > a:focus-visible,
#apus-header #primary-menu > li.active > a,
#apus-header #primary-menu > li.current-menu-item > a {
    background: var(--zi-primary-50);
    color: var(--zi-primary);
}

/* »Paketi« – edini prelivni element v meniju */
#apus-header #primary-menu > li.zdr-meni-gumb--polni > a,
#apus-header #primary-menu > li.zdr-meni-gumb--polni.active > a {
    background: var(--zi-gradient);
    color: #fff;
    font-weight: 700;
    padding: 12px 18px;
    box-shadow: 0 6px 16px rgba(29, 111, 232, .28);
    transition: transform .25s ease, box-shadow .25s ease;
}

#apus-header #primary-menu > li.zdr-meni-gumb--polni > a:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 28px rgba(29, 111, 232, .38);
    color: #fff;
}

/* izbira jezika je postranska – naj ne tekmuje z menijem */
#apus-header #primary-menu > li.pll-parent-menu-item > a {
    color: var(--zi-gray-500);
    font-size: 15px;
}

/* spustni meni */
#apus-header #primary-menu .dropdown-menu {
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-md);
    box-shadow: var(--zi-shadow-3);
    padding: 8px;
    overflow: hidden;
}

#apus-header #primary-menu .dropdown-menu > li > a {
    border-radius: var(--zi-radius-sm);
    padding: 10px 14px;
    color: var(--zi-gray-700);
    font-weight: 600;
}

#apus-header #primary-menu .dropdown-menu > li > a:hover {
    background: var(--zi-primary-50);
    color: var(--zi-primary);
}

/* --- gumba desno ------------------------------------------------------ */
/* »Objavi oglas« je poln prelivni gumb – Mihova zahteva 16. 9.:
   naj bo enak kot »Ogled oglasa« in »Poišči«. */
#apus-header .widget-submit-btn .btn-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: var(--zi-radius-sm);
    background: var(--zi-gradient) !important;
    background-image: var(--zi-gradient) !important;
    border: 0 !important;
    color: #fff !important;
    font: 700 16px/1 var(--zi-font-head);
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(29, 111, 232, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}

#apus-header .widget-submit-btn .btn-theme:hover,
#apus-header .widget-submit-btn .btn-theme:focus-visible {
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(29, 111, 232, .38);
    transform: translateY(-1px);
}

#apus-header .login-register-btn .btn-login {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 12px 4px;
    color: var(--zi-gray-700);
    font-family: var(--zi-font-head);
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    box-shadow: none;
}

#apus-header .login-register-btn .btn-login:hover {
    color: var(--zi-primary);
    background: transparent;
    transform: none;
}


/* ======================================================================
   3) HERO
   ----------------------------------------------------------------------
   Temno modra ploskev (--zi-navy) z vzorcem pik in dvema barvnima
   sijema v kotih. Prej je bil moder preliv, ki je požiral fotografijo.
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-822c1ff {
    position: relative;
    overflow: hidden;
    background-color: var(--zi-navy) !important;
    background-image: none !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-822c1ff::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--zi-vzorec);
    background-size: 24px 24px, auto, auto;
    pointer-events: none;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-822c1ff > .elementor-container {
    position: relative;
    z-index: 1;
}

/* naslov */
:is(.elementor-9348, .elementor-8610) .elementor-element-bb61b25 .elementor-heading-title {
    font-family: var(--zi-font-head);
    font-size: var(--zi-h1);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 800;
    color: #fff;
    text-wrap: pretty;
    margin: 0;
}

/* --- kartici pod naslovom -------------------------------------------- */
.zdr-hero-cta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.zdr-hero-cta__del {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 22px;
    border-radius: var(--zi-radius-md);
    text-align: left;
    transition: transform .25s ease, background-color .25s ease;
}

.zdr-hero-cta__del:hover {
    transform: translateY(-3px);
}

/* bela kartica s prelivno črto na vrhu */
.zdr-hero-cta__del--polni {
    background: #fff;
    box-shadow: var(--zi-shadow-3);
    border-top: 3px solid transparent;
    background-image: linear-gradient(#fff, #fff), var(--zi-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.zdr-hero-cta__del--polni .zdr-hero-cta__naslov {
    color: var(--zi-gray-900);
}

.zdr-hero-cta__del--polni .zdr-hero-cta__opis {
    color: var(--zi-text-muted);
}

/* prosojna kartica z obrobo */
.zdr-hero-cta__del--obroba {
    background: rgba(255, 255, 255, .06);
    border: 1.5px solid rgba(255, 255, 255, .28);
}

.zdr-hero-cta__del--obroba:hover {
    background: rgba(255, 255, 255, .12);
}

.zdr-hero-cta__del--obroba .zdr-hero-cta__naslov {
    color: #fff;
}

.zdr-hero-cta__del--obroba .zdr-hero-cta__opis {
    color: rgba(255, 255, 255, .72);
}

.zdr-hero-cta__naslov {
    font-family: var(--zi-font-head);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.zdr-hero-cta__opis {
    font-size: var(--zi-small);
    line-height: 1.45;
}


/* ======================================================================
   4) ISKALNIK V HEROJU
   ----------------------------------------------------------------------
   Bela ploskev s senco, polji na sivi podlagi in prelivnim gumbom.
   ====================================================================== */

/* Bela ploskev pripada samo obrazcu. Priljubljena iskanja stojijo pod
   njim na temni podlagi – prej jih je bela ploskev pogoltnila. */
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .widget-job-search-form {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .filter-listing-form.horizontal {
    background: var(--zi-surface);
    border-radius: var(--zi-radius-md);
    box-shadow: var(--zi-shadow-3);
    padding: 8px;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .filter-listing-form.horizontal .form-group-inner.inner {
    background: var(--zi-gray-100);
    border: 1.5px solid transparent;
    border-radius: var(--zi-radius-sm);
    min-height: 56px;
    display: flex;
    align-items: center;
    transition: border-color .2s ease, background-color .2s ease;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner.inner:focus-within {
    background: #fff;
    border-color: var(--zi-primary);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .has-border {
    border: 0 !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 52px;
    padding: 11px 14px !important;
    flex: 1 1 auto;
    font-family: var(--zi-font-body);
    font-size: 16px;
    color: var(--zi-text);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner > i {
    color: var(--zi-gray-500);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .widget-submit-btn,
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f button[type="submit"] {
    min-height: 56px;
    border: 0;
    border-radius: var(--zi-radius-sm);
    background: var(--zi-gradient);
    color: #fff;
    font: 700 16px/1 var(--zi-font-head);
    box-shadow: 0 6px 16px rgba(29, 111, 232, .28);
    transition: transform .25s ease, box-shadow .25s ease;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .widget-submit-btn:hover,
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f button[type="submit"]:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(29, 111, 232, .38);
}

/* --- priljubljena iskanja kot značke ---------------------------------- */
:is(.elementor-9348, .elementor-8610) .content-trending {
    margin-top: 14px;
}

:is(.elementor-9348, .elementor-8610) .trending-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--zi-small);
    color: rgba(255, 255, 255, .6);
}

:is(.elementor-9348, .elementor-8610) .trending-keywords > li {
    margin: 0;
    padding: 0;
    float: none;
}

:is(.elementor-9348, .elementor-8610) .trending-keywords > li.title {
    color: rgba(255, 255, 255, .6);
    font-weight: 400;
}

:is(.elementor-9348, .elementor-8610) .trending-keywords > li.item a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--zi-radius-pill);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    transition: background-color .2s ease;
}

:is(.elementor-9348, .elementor-8610) .trending-keywords > li.item a:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}


/* ======================================================================
   5) NADNAPISI SEKCIJ
   ----------------------------------------------------------------------
   Turkizna črtica in drobna razprta beseda nad naslovom. Besedilo
   dodaja `inc/podoba-2026.php`, tu je samo videz.
   ====================================================================== */

.zdr-nadnapis {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--zi-font-head);
    font-size: var(--zi-eyebrow);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--zi-accent);
    margin-bottom: 14px;
}

.zdr-nadnapis::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--zi-accent);
    flex: none;
}

/* na temni podlagi ostane turkizna, na svetli tudi – barva je ista */
.zdr-nadnapis--sredina {
    justify-content: center;
}


/* ======================================================================
   6) IZPOSTAVLJENA DELOVNA MESTA
   ----------------------------------------------------------------------
   Prej temno moder pas, na katerem so bele kartice izgubile globino.
   Zdaj svetla ploskev – kartice so glavna stvar, ozadje se umakne.
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a {
    background-color: var(--zi-bg) !important;
    background-image: none !important;
}

/* naslov in poved nad seznamom */
:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .elementor-heading-title {
    color: var(--zi-gray-900);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .elementor-widget-text-editor {
    color: var(--zi-text-muted);
}

/* prelivni del naslova na svetli podlagi */
:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .zdr-preliv--temno {
    background: var(--zi-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* ======================================================================
   7) KARTICA OGLASA
   ----------------------------------------------------------------------
   Bela kartica s tanko prelivno črto na vrhu. Nujni oglas dobi oranžno,
   izpostavljeni ostane prelivno – tako se barva ne uporablja za okras,
   ampak pove stanje.
   ====================================================================== */

.widget-jobs .list-item {
    margin-bottom: 16px;
}

article.layout-job.job-list {
    position: relative;
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-md);
    box-shadow: var(--zi-shadow-1);
    padding: 22px 24px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

article.layout-job.job-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--zi-gradient);
    z-index: 1;
}

article.layout-job.job-list:hover {
    box-shadow: var(--zi-shadow-3);
    transform: translateY(-2px);
}

/* nujno – oranžna črta namesto prelivne */
article.layout-job.job-list.is-urgent::before {
    background: var(--zi-warning);
}

/* zaprt oglas se umakne v ozadje */
article.layout-job.job-list.zdr-oglas-zaprt {
    opacity: .78;
}

article.layout-job.job-list.zdr-oglas-zaprt::before {
    background: var(--zi-gray-300);
}

/* --- logotip delodajalca --------------------------------------------- */
article.layout-job.job-list .employer-logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-sm);
    background: #fff;
    padding: 4px;
}

/* --- naslov in delodajalec ------------------------------------------- */
article.layout-job.job-list .job-title {
    font-family: var(--zi-font-head);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 4px;
}

article.layout-job.job-list .job-title a {
    color: var(--zi-gray-900);
}

article.layout-job.job-list .job-title a:hover {
    color: var(--zi-primary);
}

article.layout-job.job-list .job-employer-name a {
    color: var(--zi-primary);
    font-weight: 700;
    font-size: 15px;
}

/* --- vrstica s podatki ------------------------------------------------ */
/* Iz okvirčkov v eno tiho vrstico: kraj · poklic · datum. Prej je vsaka
   drobtina imela svoj okvir in kartica je bila videti kot obrazec. */
article.layout-job.job-list .job-metas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--zi-text-muted);
}

article.layout-job.job-list .job-metas > div {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

article.layout-job.job-list .job-metas a {
    color: var(--zi-text-muted);
}

article.layout-job.job-list .job-metas a:hover {
    color: var(--zi-primary);
}

article.layout-job.job-list .job-metas i {
    color: var(--zi-gray-500);
    font-size: 13px;
}

/* kraj dobi turkizno piko namesto ikone – edini poudarek v vrstici */
article.layout-job.job-list .job-location i {
    display: none;
}

article.layout-job.job-list .job-location::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zi-accent);
    flex: none;
}

/* vrsta dela je značka na desni strani vrstice */
article.layout-job.job-list .job-type.with-icon {
    margin-left: auto !important;
    padding: 5px 12px !important;
    border-radius: var(--zi-radius-pill) !important;
    background: var(--zi-gray-100) !important;
    font-size: 13px;
    font-weight: 600;
}

article.layout-job.job-list .job-type.with-icon i {
    display: none;
}

article.layout-job.job-list .job-type a {
    color: var(--zi-gray-700);
}

/* --- gumb ------------------------------------------------------------- */
article.layout-job.job-list .zdr-gumb-oglas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: var(--zi-radius-sm);
    background: var(--zi-gradient);
    color: #fff;
    font: 700 15px/1 var(--zi-font-head);
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(29, 111, 232, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

article.layout-job.job-list .zdr-gumb-oglas::after {
    content: "\2192";
    font-size: 15px;
}

article.layout-job.job-list .zdr-gumb-oglas:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(29, 111, 232, .32);
}

/* --- značke (izpostavljeno, nujno) ------------------------------------ */
article.layout-job.job-list .featured-text,
article.layout-job.job-list .urgent-text,
article.layout-job.job-list .is-featured-label {
    border-radius: var(--zi-radius-pill);
    font-family: var(--zi-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
}

/* poklici v eni vrstici, brez razmika pred vejico */
article.layout-job.job-list .job-metas .category-job {
    display: inline;
}

article.layout-job.job-list .job-metas .job-category.with-icon {
    display: inline;
    line-height: 1.4;
}

article.layout-job.job-list .job-metas .job-category.with-icon i {
    margin-right: 6px;
}


/* ======================================================================
   8) KARTICE »ZAKAJ ZDRAVSTVENA.INFO« IN »KAKO DELUJE«
   ----------------------------------------------------------------------
   Isti gradnik (`apus_element_features_box`) na dveh mestih.
   ⚠ Gradnik je vrtiljak Slick in ima `float: left` – višine se
   poravnajo samo, če sled postavimo v flex IN izklopimo float.
   ====================================================================== */

.widget-features-box.style1 .slick-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.widget-features-box.style1 .item {
    float: none !important;
    flex: 1 1 260px;
    min-width: 0;
}

.widget-features-box.style1 .item-inner {
    position: relative;
    height: 100%;
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-lg);
    box-shadow: var(--zi-shadow-1);
    padding: 28px 26px 30px;
    overflow: hidden;
    text-align: left;
    transition: box-shadow .25s ease, transform .25s ease;
}

.widget-features-box.style1 .item-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--zi-gradient);
}

.widget-features-box.style1 .item-inner:hover {
    box-shadow: var(--zi-shadow-3);
    transform: translateY(-3px);
}

/* --- ikona v prelivnem kvadratu --------------------------------------- */
/* Slike so ostanek demo predloge iz leta 2021 (pro.png, business.png,
   free.png) in niso znak stranke. Zamenja jih mirna geometrijska oznaka. */
.widget-features-box.style1 .features-box-image.img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--zi-gradient);
    display: grid;
    place-items: center;
    margin: 0 0 20px;
    box-shadow: 0 8px 18px rgba(29, 111, 232, .22);
}

.widget-features-box.style1 .features-box-image.img img {
    display: none;
}

.widget-features-box.style1 .features-box-image.img::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 2.5px solid #fff;
    border-radius: 5px;
}

.widget-features-box.style1 .item:nth-child(2) .features-box-image.img::after {
    border-radius: 50%;
}

.widget-features-box.style1 .item:nth-child(3) .features-box-image.img::after {
    border-radius: 3px;
    transform: rotate(45deg);
}

/* --- besedilo --------------------------------------------------------- */
.widget-features-box.style1 .features-box-content .title {
    font-family: var(--zi-font-head);
    font-size: var(--zi-h3);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--zi-gray-900);
    margin: 0 0 10px;
}

.widget-features-box.style1 .features-box-content .description {
    font-size: 15px;
    line-height: 1.55;
    color: var(--zi-text-muted);
}

.widget-features-box.style1 .top-inner {
    display: block;
}

/* --- velika bleda številka v kotu ------------------------------------- */
/* Samo v razdelku »Zakaj Zdravstvena.info« – v »Kako deluje« so številke
   že v naslovih in bi se podvojile. */
:is(.elementor-9348, .elementor-8610) .elementor-element-4ce6129 .widget-features-box.style1 .slick-carousel {
    counter-reset: zdr-kartica;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-4ce6129 .widget-features-box.style1 .item-inner::after {
    counter-increment: zdr-kartica;
    content: "0" counter(zdr-kartica);
    position: absolute;
    top: 8px;
    right: 18px;
    font-family: var(--zi-font-head);
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: var(--zi-gray-100);
    pointer-events: none;
}

/* gumbi v karticah »Kako deluje« */
.widget-features-box.style1 .features-box-content .btn,
.widget-features-box.style1 .features-box-content .btn-theme {
    margin-top: 16px;
}


/* ======================================================================
   9) PRILJUBLJENE KATEGORIJE
   ====================================================================== */

.widget-job-category-banner .category-banner-inner.v4 {
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-md);
    box-shadow: var(--zi-shadow-1);
    padding: 22px 18px;
    text-align: center;
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.widget-job-category-banner .category-banner-inner.v4:hover {
    box-shadow: var(--zi-shadow-2);
    transform: translateY(-2px);
    border-color: var(--zi-primary-100);
}

.widget-job-category-banner .category-banner-inner.v4 .title,
.widget-job-category-banner .category-banner-inner.v4 h3 {
    font-family: var(--zi-font-head);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zi-gray-900);
    margin: 0 0 10px;
}

.widget-job-category-banner .category-banner-inner.v4 .number {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--zi-radius-pill);
    background: var(--zi-accent-50);
    color: var(--zi-primary-600);
    font-size: 13px;
    font-weight: 600;
}


/* ======================================================================
   10) UGLEDNI DELODAJALCI
   ====================================================================== */

article.employer-card {
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-lg);
    box-shadow: var(--zi-shadow-1);
    padding: 28px 22px;
    text-align: center;
    transition: box-shadow .25s ease, transform .25s ease;
}

article.employer-card:hover {
    box-shadow: var(--zi-shadow-3);
    transform: translateY(-3px);
}

.widget-employers .employer-title,
.widget-employers .title {
    font-family: var(--zi-font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--zi-gray-900);
}

.widget-employers .employer-location,
.widget-employers .location {
    color: var(--zi-text-muted);
    font-size: 15px;
}


/* ======================================================================
   11) NOGA
   ----------------------------------------------------------------------
   Ista temna modra kot hero, da se stran zapre v isti barvi, v kateri
   se je odprla.
   ====================================================================== */

#apus-footer,
.apus-footer {
    background-color: var(--zi-navy) !important;
}

#apus-footer .widget-title,
.apus-footer .widget-title {
    font-family: var(--zi-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

#apus-footer a,
.apus-footer a {
    color: rgba(255, 255, 255, .86);
}

#apus-footer a:hover,
.apus-footer a:hover {
    color: var(--zi-accent);
}

/* besedilo v karticah je levo poravnano – sredinsko poravnano besedilo se
   v treh stolpcih bere slabše in dizajn ga nima */
.widget-features-box.style1 .features-box-content,
.widget-features-box.style1 .item-inner {
    text-align: left !important;
}

.widget-features-box.style1 .features-box-image.img {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* število prostih mest pri delodajalcu je značka, ne gumb – gumb na tej
   kartici ni, ker je klikljiva cela kartica */
.widget-employers .wrapper-open-job .open-job {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--zi-radius-pill);
    background: var(--zi-primary-50) !important;
    background-image: none !important;
    color: var(--zi-primary-600) !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none !important;
}

article.employer-card:hover .wrapper-open-job .open-job {
    background: var(--zi-gradient) !important;
    color: #fff !important;
}

.widget-employers .employer-location .value {
    color: var(--zi-text-muted);
    font-size: 15px;
}

.widget-employers .employer-logo .image-wrapper img {
    max-height: 72px;
    width: auto;
    object-fit: contain;
}


/* ======================================================================
   12) DVE KARTICI: ZA DELODAJALCE / ZA ISKALCE ZAPOSLITVE
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-1c217473 .elementor-top-column > .elementor-widget-wrap {
    position: relative;
    background: var(--zi-surface) !important;
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-lg);
    box-shadow: var(--zi-shadow-1);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-1c217473 .elementor-top-column > .elementor-widget-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--zi-gradient);
    z-index: 2;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-1c217473 .elementor-top-column > .elementor-widget-wrap:hover {
    box-shadow: var(--zi-shadow-3);
    transform: translateY(-3px);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-1c217473 .elementor-heading-title {
    font-family: var(--zi-font-head);
    font-size: var(--zi-h3);
    font-weight: 800;
    color: var(--zi-gray-900);
}


/* ======================================================================
   13) PAS S POZIVOM K PAKETOM
   ----------------------------------------------------------------------
   Temno moder otok sredi svetle strani – ista ploskev in isti vzorec kot
   hero, da se zgodba na sredini strani vrne k izhodišču.
   ====================================================================== */

/* Zunanji vsebnik pasu nima svoje barve – otok je notranja sekcija
   z razredom .zdr-cta-pas. ⚠ Isti pas stoji tudi na strani O nas
   (sekcija c7487cc / 5dea35c7), zato se ravnamo po razredu in ne po
   oznaki elementa. */
:is(.elementor-9348, .elementor-8610) .elementor-element-zdrcta01,
.elementor-section.elementor-element-c7487cc {
    background-color: transparent !important;
    background-image: none !important;
}

.zdr-cta-pas {
    position: relative;
    overflow: hidden;
    border-radius: var(--zi-radius-lg);
    background-color: var(--zi-navy) !important;
    background-image: var(--zi-vzorec) !important;
    background-size: 24px 24px, auto, auto !important;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px) !important;
}

.zdr-cta-pas .elementor-heading-title {
    font-family: var(--zi-font-head);
    font-size: var(--zi-h2);
    line-height: 1.15;
    letter-spacing: -.015em;
    font-weight: 800;
    color: #fff;
}

.zdr-cta-pas .elementor-widget-text-editor {
    color: rgba(255, 255, 255, .78);
    font-size: var(--zi-small);
}

/* gumb je bel – edini bel gumb na strani, zato izstopa */
.zdr-cta-pas .elementor-button {
    min-height: 48px;
    padding: 14px 24px;
    border-radius: 10px;
    background: #fff !important;
    background-image: none !important;
    color: var(--zi-primary) !important;
    font: 700 15px/1 var(--zi-font-head);
    box-shadow: var(--zi-shadow-3);
    transition: transform .25s ease;
}

.zdr-cta-pas .elementor-button:hover {
    transform: scale(1.04);
    color: var(--zi-primary-600) !important;
}


/* ======================================================================
   14) AKTUALNO – KARTICE ČLANKOV
   ====================================================================== */

.widget-blogs .post-item,
.widget-blogs article {
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-lg);
    box-shadow: var(--zi-shadow-1);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.widget-blogs .post-item:hover,
.widget-blogs article:hover {
    box-shadow: var(--zi-shadow-3);
    transform: translateY(-3px);
}

/* datum v enoširinski pisavi – drobna, mirna oznaka, kot v dizajnu */
.widget-blogs .entry-date,
.widget-blogs .post-date,
.widget-blogs .date {
    font-family: var(--zi-font-mono);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--zi-gray-500);
}

.widget-blogs .entry-title,
.widget-blogs .post-title {
    font-family: var(--zi-font-head);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.widget-blogs .entry-title a,
.widget-blogs .post-title a {
    color: var(--zi-gray-900);
}

.widget-blogs .entry-title a:hover,
.widget-blogs .post-title a:hover {
    color: var(--zi-primary);
}

/* --- ikone družbenih omrežij ------------------------------------------ */
/* Prej polni modri krogi, večji od naslova razdelka. Zdaj obroba. */
:is(.elementor-9348, .elementor-8610) .elementor-element-7ef83d9 .elementor-social-icon,
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-social-icon {
    width: 38px;
    height: 38px;
    background: transparent !important;
    border: 1px solid var(--zi-gray-300);
    color: var(--zi-primary) !important;
    transition: background-color .2s ease, border-color .2s ease;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7ef83d9 .elementor-social-icon:hover,
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-social-icon:hover {
    background: var(--zi-primary-50) !important;
    border-color: var(--zi-primary-100);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7ef83d9 .elementor-social-icon i,
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-social-icon i {
    font-size: 15px;
}


/* ======================================================================
   15) ZAPOSLITVE NA E-POŠTO
   ----------------------------------------------------------------------
   Svetla ploskev z blagim barvnim sijem namesto polnega modrega pasu –
   modra je v tem delu strani že porabljena na pasu s paketi.
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 {
    position: relative;
    overflow: hidden;
    background-color: var(--zi-bg) !important;
    background-image:
        radial-gradient(60% 90% at 100% 0%, rgba(29, 111, 232, .16), transparent 62%),
        radial-gradient(45% 80% at 0% 100%, rgba(31, 191, 176, .14), transparent 62%) !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .elementor-heading-title {
    color: var(--zi-gray-900);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .elementor-widget-text-editor {
    color: var(--zi-text-muted);
}

/* bela kartica z obrazcem dobi prelivno črto na vrhu */
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice {
    position: relative;
    border-radius: var(--zi-radius-lg);
    box-shadow: var(--zi-shadow-3);
    overflow: hidden;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--zi-gradient);
}

/* ⚠ Elementorjev slog strani (`post-9348.css`) se naloži ZA to datoteko,
   zato barve v prenovljenih sekcijah potrebujejo `!important`. Brez tega
   je ostalo belo besedilo iz starega modrega pasu na svetli podlagi. */
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .elementor-heading-title,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 h2,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 h3 {
    color: var(--zi-gray-900) !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .elementor-widget-text-editor,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .elementor-widget-text-editor p {
    color: var(--zi-text-muted) !important;
}

/* prelivni del naslova v tej sekciji na svetli podlagi */
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-preliv,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-preliv--temno {
    background: var(--zi-gradient-text) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* znak v krogu mora podedovati barvo obrobe, sicer ostane bel */
.elementor-social-icon i,
.elementor-social-icon svg {
    color: inherit !important;
    fill: currentColor !important;
}

/* uvodna poved pod naslovom v heroju (doda jo inc/podoba-2026.php) */
.zdr-hero-poved {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    line-height: 1.55;
    max-width: 54ch;
}

/* nadnapis nad naslovom: na temni podlagi turkizen, na svetli prav tako */
.zdr-nadnapis {
    margin-top: 0;
}

/* vejice med priljubljenimi iskanji so ostanek seznama – z značkami so odveč */
:is(.elementor-9348, .elementor-8610) .trending-keywords > li.item::after {
    content: none !important;
}

/* Ista past kot pri e-novicah: besedilo je bilo pisano za temen pas.
   Sekcija je zdaj svetla, zato barve postavimo z `!important`. */
:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .elementor-heading-title,
:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a h2 {
    color: var(--zi-gray-900) !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .elementor-widget-text-editor,
:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .elementor-widget-text-editor p {
    color: var(--zi-text-muted) !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .zdr-preliv,
:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .zdr-preliv--temno {
    background: var(--zi-gradient-text) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* gumb »Vsa delovna mesta« na dnu seznama */
:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .elementor-button {
    border-radius: var(--zi-radius-sm);
    font-family: var(--zi-font-head);
    font-weight: 700;
}

/* »Prijava« nima ne obrobe ne sence – je navadna povezava */
#apus-header .login-register-btn .btn-login {
    box-shadow: none !important;
}


/* ======================================================================
   16) ISKALNIK NA STRANI O PORTALU
   ----------------------------------------------------------------------
   Isti otok kot pas s paketi, da na eni strani ne stojita dve različni
   modri ploskvi drug pod drugim.
   ====================================================================== */

.zdr-iskalnik-onas .container {
    border-radius: var(--zi-radius-lg);
    background-color: var(--zi-navy) !important;
    background-image: var(--zi-vzorec) !important;
    background-size: 24px 24px, auto, auto !important;
    overflow: hidden;
}

.zdr-iskalnik-onas .form-control {
    border-radius: var(--zi-radius-sm);
}

.zdr-iskalnik-onas .btn,
.zdr-iskalnik-onas button[type="submit"] {
    border-radius: var(--zi-radius-sm);
    background: var(--zi-gradient) !important;
    background-image: var(--zi-gradient) !important;
    border: 0;
    color: #fff !important;
    font-family: var(--zi-font-head);
    font-weight: 700;
}


/* ======================================================================
   17) NASLOVNI PAS PODSTRANI
   ----------------------------------------------------------------------
   Vsaka podstran se odpre z isto temno ploskvijo kot naslovnica.
   ====================================================================== */

.zdr-glava-arhiva,
.page-title-wrapper,
.apus-pageheader {
    position: relative;
    background-color: var(--zi-navy) !important;
    overflow: hidden;
}

.zdr-glava-arhiva::before,
.page-title-wrapper::before,
.apus-pageheader::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--zi-vzorec);
    background-size: 24px 24px, auto, auto;
    pointer-events: none;
}

.zdr-glava-arhiva > *,
.page-title-wrapper > *,
.apus-pageheader > * {
    position: relative;
    z-index: 1;
}

.zdr-glava-arhiva__naslov {
    font-family: var(--zi-font-head);
    font-size: var(--zi-h1);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-weight: 800;
    color: #fff;
}


/* ======================================================================
   18) MENI: NADREJENA POSTAVKA ODPRTE STRANI
   ====================================================================== */

#apus-header #primary-menu > li.current-menu-ancestor > a,
#apus-header #primary-menu > li.current-menu-parent > a,
#apus-header #primary-menu > li.current_page_parent > a {
    background: var(--zi-primary-50);
    color: var(--zi-primary);
}

/* ⚠ Pogosta vprašanja so imela vijolično-moder preliv (#302EA7 → #1967D2).
   Vijolična ni v barvni lestvici portala; pas gre na isto temno modro
   kot vse ostale temne ploskve. */
.zdr-hero {
    background-color: var(--zi-navy) !important;
    background-image: var(--zi-vzorec) !important;
    background-size: 24px 24px, auto, auto !important;
}

/* noga je Elementorjeva sekcija, zato je pravilo za #apus-footer ne ujame */
.elementor-element-d697117,
.elementor-element-ca958cb {
    background-color: var(--zi-navy) !important;
}

/* Kartica delodajalca je `article.employer-card`; notranji `.employer-grid`
   ne sme imeti svoje ploskve, sicer nastane kartica v kartici. */
.widget-employers .employer-grid.v1 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}

article.employer-card {
    position: relative;
    height: 100%;
    overflow: hidden;
}

article.employer-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--zi-gradient);
}

/* vse kartice v vrstici enako visoke */
.widget-employers .slick-track {
    display: flex !important;
    align-items: stretch;
}

.widget-employers .slick-slide,
.widget-employers .slick-slide > div,
.widget-employers .item {
    height: auto !important;
    display: flex;
}

.widget-employers .item > article {
    flex: 1 1 auto;
}


/* ======================================================================
   19) POPRAVKI PO MIHOVEM PREGLEDU, 16. 9. 2026
   ====================================================================== */

/* --- temna črta ob robu gumbov --------------------------------------- */
/* ⚠⚠ Vzrok: tema da gumbom `border: 1px solid transparent`, preliv pa se
   riše čez ves border-box (`background-clip: border-box`), medtem ko je
   umerjen na padding-box (`background-origin: padding-box`) in se
   ponavlja. V tistem enem pikslu obrobe se je zato pokazal DRUGI konec
   preliva – desno temno modra, levo turkizna. Ni senca in ni obroba. */
.btn,
.btn-theme,
.btn-submit,
.elementor-button,
.widget-submit-btn .btn-theme,
.zdr-gumb-oglas,
.open-job,
#primary-menu > li > a,
.elementor-element .elementor-button,
article.layout-job.job-list .zdr-gumb-oglas,
.widget-employers .wrapper-open-job .open-job,
.zdr-cta-pas .elementor-button {
    /* ⚠ Bližnjica `background` v drugih pravilih ponastavi origin in repeat,
       zato je tu !important – sicer se temna črta vrne. */
    background-origin: border-box !important;
    background-repeat: no-repeat !important;
}


/* --- iskalnik: polja naj zapolnijo svoj stolpec ----------------------- */
/* Polja so bila ozka, izbirnik kategorije pa širok 60 px, ker jim tema
   ne da širine. Bela ploskev je bila zato videti prazna. */
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .filter-listing-form.horizontal {
    padding: 8px;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .main-inner,
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .content-main-inner {
    width: 100%;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 0;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .row > div {
    padding: 0;
    float: none;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .col-md-5 {
    flex: 2 1 260px;
    width: auto;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .col-md-4 {
    flex: 1 1 200px;
    width: auto;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .wrapper-submit {
    flex: 0 1 200px;
    min-width: 170px;
    width: auto;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group,
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner {
    width: 100%;
    margin: 0;
    height: 100%;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-control,
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f select {
    width: 100% !important;
    flex: 1 1 auto;
}

/* izbirnik kategorije je gradnik Select2 – tudi ta mora zapolniti polje */
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .select2,
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .select2-container {
    width: 100% !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .select2-container .select2-selection--single {
    height: 52px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .widget-submit-btn,
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .wrapper-submit .btn-submit {
    width: 100%;
    height: 100%;
}

/* ikona v polju naj bo ožja in poravnana s pisavo */
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner.has-icon > i {
    flex: none;
    width: 20px;
    margin-left: 14px;
    margin-right: 0;
    font-size: 15px;
    line-height: 1;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner.has-icon .form-control {
    padding-left: 10px !important;
}


/* ======================================================================
   20) »ZAKAJ ZDRAVSTVENA.INFO« NA TEMNI PLOSKVI
   ----------------------------------------------------------------------
   V dizajnu je ta razdelek temno moder z istim vzorcem kot hero; bele
   kartice stojijo na njem. Pri nas sta naslov in kartice dve ločeni
   Elementorjevi sekciji, zato dobita ploskev obe in vmes ni reže.
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-8e51be5,
:is(.elementor-9348, .elementor-8610) .elementor-element-4ce6129 {
    position: relative;
    background-color: var(--zi-navy) !important;
    background-image: var(--zi-vzorec) !important;
    background-size: 24px 24px, auto, auto !important;
    margin: 0 !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8e51be5 {
    padding-top: clamp(48px, 6vw, 80px) !important;
    padding-bottom: 0 !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-4ce6129 {
    padding-top: 32px !important;
    padding-bottom: clamp(48px, 6vw, 80px) !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8e51be5 .elementor-heading-title,
:is(.elementor-9348, .elementor-8610) .elementor-element-8e51be5 h2 {
    color: #fff !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8e51be5 .elementor-widget-text-editor,
:is(.elementor-9348, .elementor-8610) .elementor-element-8e51be5 .elementor-widget-text-editor p {
    color: rgba(255, 255, 255, .78) !important;
}

/* na temni podlagi je preliv v naslovu svetlejši, sicer izgine */
:is(.elementor-9348, .elementor-8610) .elementor-element-8e51be5 .zdr-preliv {
    background: linear-gradient(135deg, #5FA8FF 0%, #3FE0D0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}


/* ======================================================================
   21) PRAVE IKONE V KARTICAH
   ----------------------------------------------------------------------
   Prej kvadrat, krog in romb – to so bile zasilne oblike. Zdaj znaki iz
   pisave teme (Flaticon), ki jo portal tako ali tako že nalaga.
   ====================================================================== */

.widget-features-box.style1 .features-box-image.img::after {
    content: "\f10c";
    font-family: "Flaticon";
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 1;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: #fff;
    transform: none;
}

.widget-features-box.style1 .item:nth-child(2) .features-box-image.img::after {
    content: "\f112";
    border-radius: 0;
}

.widget-features-box.style1 .item:nth-child(3) .features-box-image.img::after {
    content: "\f103";
    border-radius: 0;
    transform: none;
}

/* »Kako deluje«: račun → paket → doseg */
:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .item:nth-child(1) .features-box-image.img::after {
    content: "\f115";
}

:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .item:nth-child(2) .features-box-image.img::after {
    content: "\f120";
}

:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .item:nth-child(3) .features-box-image.img::after {
    content: "\f107";
}


/* ======================================================================
   22) ZNAČKA S ŠTEVILOM PROSTIH MEST PRI KATEGORIJI
   ----------------------------------------------------------------------
   Prej v dveh vrsticah, z oklepaji in turkizna tudi pri nič.
   Zdaj ena vrstica; kategorija brez oglasov je siva, ne zelena.
   Oklepaje odstrani `inc/podoba-2026.php`.
   ====================================================================== */

.widget-job-category-banner .category-banner-inner.v4 .number {
    display: inline-block;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: var(--zi-radius-pill);
    background: var(--zi-primary-50);
    color: var(--zi-primary-600);
    font-family: var(--zi-font-head);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-job-category-banner .category-banner-inner.v4 .number.zdr-prazna {
    background: var(--zi-gray-100);
    color: var(--zi-gray-500);
    font-weight: 600;
}

.widget-job-category-banner .category-banner-inner.v4 .category-icon i {
    font-size: 30px;
    color: var(--zi-primary);
}

.widget-job-category-banner .category-banner-inner.v4:hover .category-icon i {
    color: var(--zi-accent-blue);
}


/* ======================================================================
   23) DROBNI POPRAVKI PO DRUGEM PREGLEDU, 16. 9. 2026
   ====================================================================== */

/* --- ikona v iskalnem polju ------------------------------------------ */
/* ⚠ Tema ikono postavi absolutno (`left: 18px; top: 30px`), zato je odmik
   prek `margin` ne premakne – ležala je čez besedilo. Poravnamo jo na
   sredino višine in poljem damo levi odmik zanjo. */
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner.has-icon > i {
    position: absolute;
    top: 50% !important;
    left: 18px !important;
    transform: translateY(-50%);
    margin: 0;
    width: 18px;
    font-size: 15px;
    line-height: 1;
    color: var(--zi-gray-500);
    pointer-events: none;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner.has-icon .form-control {
    padding-left: 46px !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner.has-icon .select2-container .select2-selection__rendered {
    padding-left: 46px !important;
}

/* --- glava: prostor do desnega roba ---------------------------------- */
/* Pri 1440 px je »Prijava« segla 11 px čez rob. Postavke menija so zato
   nekoliko tesnejše; besedilo ostane enako veliko. */
#apus-header #primary-menu > li > a {
    padding: 10px 7px;
}

#apus-header #primary-menu > li.zdr-meni-gumb--polni > a {
    padding: 12px 16px;
}

#apus-header .elementor-element-82fe2a5 {
    gap: 12px;
}

#apus-header .widget-submit-btn .btn-theme {
    padding: 12px 18px;
}


/* ======================================================================
   24) ŠE DVA POPRAVKA V RAZDELKU »ZAKAJ ZDRAVSTVENA.INFO«
   ====================================================================== */

/* ⚠ Razdelek sestavljata DVE Elementorjevi sekciji, druga pod drugo.
   Vsaka riše svoj barvni sij v kotih in na stiku je nastal viden šiv.
   Zato imata tu samo vzorec pik – ta je tako blag, da se prehod ne vidi. */
:is(.elementor-9348, .elementor-8610) .elementor-element-8e51be5,
:is(.elementor-9348, .elementor-8610) .elementor-element-4ce6129 {
    background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.5px) !important;
    background-size: 24px 24px !important;
}

/* gumb »Vsa delovna mesta« je bil bel na svetlem – zdaj obroba */
:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 22px;
    border-radius: 10px;
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid var(--zi-primary) !important;
    color: var(--zi-primary) !important;
    font: 700 15px/1 var(--zi-font-head);
    box-shadow: none;
    transition: background-color .2s ease, box-shadow .2s ease;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-670a51a .elementor-button:hover {
    background: var(--zi-primary-50) !important;
    color: var(--zi-primary) !important;
    box-shadow: var(--zi-shadow-2);
}


/* ======================================================================
   25) PAS BOOST IN PAS Z LOGOTIPI
   ====================================================================== */

/* gumb na pasu BOOST naj bo enak kot ostali prelivni gumbi */
.zdr-boost-pas__gumb {
    background: var(--zi-gradient) !important;
    background-image: var(--zi-gradient) !important;
    background-origin: border-box !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    border-radius: var(--zi-radius-sm) !important;
    color: #fff !important;
    font-family: var(--zi-font-head);
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(29, 111, 232, .28);
}

.zdr-boost-pas__gumb:hover {
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(29, 111, 232, .38);
    transform: translateY(-1px);
}

/* --- pas z logotipi delodajalcev -------------------------------------- */
/* ⚠ Vrtiljak Slick da vsakemu polju svojo višino in logotipi so stali
   v stopnicah. Sled postavimo v flex in polja raztegnemo. */
.widget-brands .slick-track,
.elementor-widget-apus_element_brands .slick-track {
    display: flex !important;
    align-items: stretch;
}

.widget-brands .slick-slide,
.widget-brands .slick-slide > div,
.widget-brands .item,
.elementor-widget-apus_element_brands .slick-slide,
.elementor-widget-apus_element_brands .slick-slide > div,
.elementor-widget-apus_element_brands .item {
    height: auto !important;
    display: flex;
    float: none;
}

.widget-brands .item > *,
.elementor-widget-apus_element_brands .item > * {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-brands img,
.elementor-widget-apus_element_brands img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
}


/* ======================================================================
   26) RAZDELEK »AKTUALNO« PO DIZAJNU
   ----------------------------------------------------------------------
   V dizajnu je naslov levo, »Sledi nam« z ikonami pa desno v isti vrstici;
   pod njima tri enako visoke kartice s povezavo »Preberi več«.
   Pri nas sta to DVE Elementorjevi sekciji, zato stolpec z ikonami
   potegnemo navzgor k naslovu.
   ====================================================================== */

/* naslov levo, ne na sredini */
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 {
    padding-bottom: 0 !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-widget-wrap,
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-heading-title,
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-widget-text-editor {
    text-align: left !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-widget-text-editor {
    max-width: 60ch;
}

/* --- »Sledi nam« gre v vrstico z naslovom ----------------------------- */
/* ⚠ Naslov in ikone sta v DVEH sekcijah, ena pod drugo. Stolpec z ikonami
   zato postavimo absolutno in ga dvignemo v višino naslova. Pod 992 px se
   vrne v navadni tok, ker tam ob naslovu ni prostora. */
:is(.elementor-9348, .elementor-8610) .elementor-element-7ef83d9 {
    position: relative;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7ef83d9 > .elementor-container {
    display: flex;
    flex-wrap: wrap;
}

:is(.elementor-9348, .elementor-8610) .elementor-element.elementor-element-a43f8c0 {
    width: 100%;
}

@media (min-width: 992px) {
    :is(.elementor-9348, .elementor-8610) .elementor-element.elementor-element-24a9046 {
        position: absolute;
        top: -76px;
        right: 0;
        width: auto;
        z-index: 2;
    }
}

:is(.elementor-9348, .elementor-8610) .elementor-element-24a9046 > .elementor-widget-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element.elementor-element-4f887f6,
:is(.elementor-9348, .elementor-8610) .elementor-element.elementor-element-7591fcb {
    width: auto !important;
    max-width: none;
    margin: 0 !important;
    flex: none;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-4f887f6 .elementor-heading-title {
    font-family: var(--zi-font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--zi-text-muted);
    margin: 0;
    white-space: nowrap;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-grid {
    display: flex !important;
    gap: 8px;
    grid-template-columns: none !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-grid-item {
    margin: 0 !important;
}

/* ikone kot majhni obrobljeni krogi, kot v dizajnu */
:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-social-icon {
    width: 36px;
    height: 36px;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--zi-gray-300);
    border-radius: 50%;
    color: var(--zi-primary) !important;
    transition: background-color .2s ease, border-color .2s ease;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-social-icon:hover {
    background: var(--zi-primary-50) !important;
    border-color: var(--zi-primary-100);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-social-icon i,
:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-social-icon svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

@media (max-width: 991px) {
    :is(.elementor-9348, .elementor-8610) .elementor-element.elementor-element-24a9046 {
        width: 100%;
        margin-bottom: 16px !important;
    }

    :is(.elementor-9348, .elementor-8610) .elementor-element-24a9046 > .elementor-widget-wrap {
        justify-content: flex-start;
    }
}

/* nadnapis in naslov levo – Elementor ju sicer postavi na sredino */
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-widget-container,
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-heading-title,
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-widget-text-editor,
:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .elementor-widget-text-editor p {
    text-align: left !important;
}



/* --- kartice člankov: enako visoke, s povezavo na dnu ----------------- */
.widget-blogs .slick-track {
    display: flex !important;
    align-items: stretch;
}

.widget-blogs .slick-slide,
.widget-blogs .slick-slide > div,
.widget-blogs .item {
    height: auto !important;
    display: flex;
    float: none;
}

.widget-blogs .item > article {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* vse slike enako visoke – sicer kartice ne stojijo v vrsti */
.widget-blogs .top-image .entry-thumb,
.widget-blogs .top-image .image-wrapper {
    display: block;
    width: 100%;
}

.widget-blogs .top-image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.widget-blogs .inner-bottom {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
    gap: 8px;
}

.widget-blogs .top-info {
    margin: 0;
}

.widget-blogs .entry-title {
    margin: 0;
}

/* povezavo »Preberi več« doda inc/podoba-2026.php */
.widget-blogs .zdr-preberi {
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--zi-font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--zi-primary);
}

.widget-blogs .zdr-preberi:hover {
    color: var(--zi-primary-600);
}

/* puščici vrtiljaka sta drobni in ne tekmujeta s karticami */
.widget-blogs .slick-arrow {
    width: 38px;
    height: 38px;
    border: 1px solid var(--zi-gray-300);
    background: var(--zi-surface);
    color: var(--zi-gray-700);
    box-shadow: var(--zi-shadow-1);
}

.widget-blogs .slick-arrow:hover {
    border-color: var(--zi-primary-100);
    color: var(--zi-primary);
}


/* ======================================================================
   27) »OBJAVITE DELOVNO MESTO«: NAZAJ NA IZVIRNE IKONE
   ----------------------------------------------------------------------
   Mihova zahteva 16. 9.: v teh treh poljih ostanejo ikone, ki so bile.
   Prelivni kvadrat in znak iz pisave veljata samo za razdelek
   »Zakaj Zdravstvena.info«.
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .features-box-image.img {
    width: auto;
    height: auto;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0;
    display: block;
    margin: 0 0 18px;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .features-box-image.img img {
    display: block;
    width: auto;
    max-height: 64px;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .features-box-image.img::after {
    content: none !important;
}


/* --- dva popravka v razdelku »Aktualno« ------------------------------- */

/* Nadnapis je bil še vedno na sredini: Elementor postavi poravnavo na sam
   gradnik, zato jo je treba povoziti tam, ne na notranjem ovoju. */
:is(.elementor-9348, .elementor-8610) .elementor-element.elementor-element-5f7999c,
:is(.elementor-9348, .elementor-8610) .elementor-element.elementor-element-563cb11 {
    text-align: left !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-eb07df8 .zdr-nadnapis {
    justify-content: flex-start;
}

/* V dizajnu stoji »Preberi več« takoj pod naslovom, ne potisnjen na dno
   kartice – tako je razmik enak razmiku med datumom in naslovom. */
.widget-blogs .zdr-preberi {
    margin-top: 2px;
    padding-top: 0;
}

.widget-blogs .inner-bottom {
    justify-content: flex-start;
}


/* Izvirna ikona v korakih objave je ostala zamaknjena od besedila –
   tema ji da samodejne robove. Poravnamo jo na levo, kot naslov. */
:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .top-inner {
    text-align: left !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .features-box-image.img img {
    margin-left: 0 !important;
    margin-right: auto !important;
}


/* ======================================================================
   28) ŠE DVA POPRAVKA PO MIHOVEM PREGLEDU, 16. 9. 2026
   ====================================================================== */

/* gumb »Paketi« v meniju: napis je bil premajhen za polno ploskev */
#apus-header #primary-menu > li.zdr-meni-gumb--polni > a,
#apus-header #primary-menu > li.zdr-meni-gumb--polni.active > a {
    font-size: 17px;
    padding: 12px 20px;
}

/* --- polji v iskalniku sta bela, ne sivi ----------------------------- */
/* Miha, 16. 9.: polji naj bosta iste barve kot bela ploskev okoli njiju.
   Da polje kljub temu ostane prepoznavno, se ob kliku obarva rob. */
:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .filter-listing-form.horizontal .form-group-inner.inner {
    background: var(--zi-surface);
    border: 1.5px solid transparent;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner.inner:hover {
    border-color: var(--zi-gray-200);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f .form-group-inner.inner:focus-within {
    background: var(--zi-surface);
    border-color: var(--zi-primary);
}


/* ======================================================================
   29) MRTEV PROSTOR POD VRTILJAKI
   ----------------------------------------------------------------------
   ⚠⚠ Vrtiljak Slick ima `padding-bottom: 52px`, rezervirano za pikice.
   Kadar je stran ena sama (npr. trije ugledni delodajalci), so pikice
   `display: none`, prostor pa ostane — pod karticami je zato zijala
   prazna luknja, razmik nad njimi in pod njimi pa ni bil enak.
   Prostor zdaj naredijo pikice same, in to samo kadar so res na strani.
   ====================================================================== */

/* ⚠ Velja SAMO za vrtiljake brez vidnega krmiljenja. Pri novicah
   puščici stojita spodaj in prostor tam mora ostati – brez njega sta
   puščici zlezli čez kartice. */
.widget-employers .slick-carousel,
.widget-brands .slick-carousel {
    /* ⚠ tema ima to pravilo z večjo natančnostjo, zato !important */
    padding-bottom: 0 !important;
}

.widget-employers .slick-dots,
.widget-brands .slick-dots {
    margin-top: 24px;
    margin-bottom: 0;
}

/* --- razmik nad karticami in pod njimi naj bo enak -------------------- */
:is(.elementor-9348, .elementor-8610) .elementor-element-8f321c6 {
    padding-bottom: 0 !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-8f321c6 .elementor-widget-wrap {
    padding-bottom: 0;
}


/* ======================================================================
   30) GUMBA V GLAVI PO MIHOVEM PREGLEDU, 16. 9. 2026
   ====================================================================== */

/* »Paketi« še dve piki večji */
#apus-header #primary-menu > li.zdr-meni-gumb--polni > a,
#apus-header #primary-menu > li.zdr-meni-gumb--polni.active > a {
    font-size: 19px;
    padding: 12px 22px;
}

/* --- »Prijava« dobi prelivno obrobo ---------------------------------- */
/* Prej navaden napis, ki se je izgubil ob polnem gumbu poleg njega.
   Obrobe v prelivu CSS ne pozna, zato sta plasti dve: bela notranjost
   (`padding-box`) in preliv pod njo (`border-box`). Videti je kot
   1 px prelivna obroba. */
#apus-header .login-register-btn .btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px !important;
    border: 1px solid transparent !important;
    border-radius: var(--zi-radius-sm) !important;
    background-color: transparent !important;
    background-image: linear-gradient(#fff, #fff), var(--zi-gradient) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-repeat: no-repeat !important;
    color: var(--zi-primary) !important;
    font-family: var(--zi-font-head);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background-image .2s ease, box-shadow .2s ease;
}

#apus-header .login-register-btn .btn-login:hover,
#apus-header .login-register-btn .btn-login:focus-visible {
    background-image: linear-gradient(var(--zi-primary-50), var(--zi-primary-50)), var(--zi-gradient) !important;
    color: var(--zi-primary) !important;
    box-shadow: var(--zi-shadow-2) !important;
    transform: none;
}


/* ⚠ Velikost pisave v gumbih glave je drugod zapisana z `!important`
   (bloki korakov 431/432 v style.css), zato je bila vsa nastavljena
   velikost tiho povožena na 14 px. Tu mora biti prav tako `!important`.
   Hkrati dobi »Paketi« isti preliv kot ostali gumbi – prej je imel
   modro-moder preliv, ostali pa modro-turkiznega. */
#apus-header #primary-menu > li.zdr-meni-gumb--polni > a,
#apus-header #primary-menu > li.zdr-meni-gumb--polni.active > a {
    font-size: 19px !important;
    line-height: 1.2 !important;
    background-image: var(--zi-gradient) !important;
}

#apus-header .widget-submit-btn .btn-theme {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

#apus-header .login-register-btn .btn-login {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

/* Z večjimi napisi je glava spet zdrsnila 5 px čez rob – postavke menija
   dobijo nekaj manj prostora ob straneh. */
#apus-header #primary-menu > li > a {
    padding: 10px 5px;
}


/* ======================================================================
   31) ARHIVI OGLASOV DOBIJO ISTO POSTAVITEV KOT »PROSTE ZAPOSLITVE«
   ----------------------------------------------------------------------
   Miha, 16. 9. 2026: »poklici/dentalna in povsod ostalo naredi kot je bil
   Proste zaposlitve«.

   ⚠⚠ Oglasi se izpisujejo na DVEH predlogah:

     /seznam-zaposlitev/        `page-jobs.php`
        → `.main-content.inner` je flex, stranska vrstica `0 0 450px`
          ob levem robu, vsebina se razteza do desnega roba,
          razmik med njima dela `padding-left: 50px` na
          `.content-listing-inner`. **Ta stran ostane nedotaknjena.**

     /poklic/…, /lokacija-dela/…, /vrsta-dela/…
        `archive-job_listing.php`
        → Bootstrapovi stolpci v ožjem `.container`; pri 1920 px je imela
          315 px praznine na vsaki strani, medtem ko je seznam segel do
          roba zaslona.

   Tu arhivom podtaknemo isto mero kot seznamu. Predloge se ne dotikamo –
   samo postavitve.
   ====================================================================== */

@media (min-width: 992px) {

    /* vsebnik gre čez celo širino, tako kot na seznamu */
    #main-container.page-job-board > .container {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* ⚠ V vrstici stoji pred stransko vrstico še en prazen element, zato
       razmika ne delamo z `gap` – ta bi vse odrinil v desno. Razmik dela
       levi odmik vsebinskega stolpca, natanko kot na seznamu. */
    #main-container.page-job-board .row:has(> .sidebar-wrapper) {
        display: flex;
        margin-left: 0;
        margin-right: 0;
    }

    #main-container.page-job-board .row:has(> .sidebar-wrapper) > .sidebar-wrapper.col-md-4 {
        flex: 0 0 450px;
        width: 450px;
        max-width: 450px;
        padding-left: 0;
        padding-right: 0;
    }

    #main-container.page-job-board .row:has(> .sidebar-wrapper) > .col-md-8 {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        padding-left: 50px;
        padding-right: 50px;
    }

    /* ploskev s filtri stoji na istem mestu kot na seznamu */
    #main-container.page-job-board .sidebar.sidebar-left {
        width: 100%;
        padding-left: 50px;
        padding-right: 0;
    }

    /* Naslov v pasu je poravnan z vsebinskim stolpcem, ne z robom zaslona:
       450 (stranska) + 50 (razmik) − 15 (žleb vrstice) = 485 px, natanko
       tako kot na seznamu. */
    body.archive .zdr-glava-arhiva .container {
        max-width: none;
        width: 100%;
        padding-left: 485px;
        padding-right: 50px;
    }
}


/* ======================================================================
   32) GLAVA PORAVNANA Z VSEBINO STRANI
   ----------------------------------------------------------------------
   Miha, 16. 9. 2026: logotip, glava in iskalnik naj stojijo na isti
   navpičnici.

   ⚠ Vsebina strani stoji v Elementorjevem vsebniku, **širokem 1320 px in
   sredinskem**; kartice in iskalnik se začnejo 15 px znotraj njega.
   Glava je bila do zdaj čez celo širino zaslona, zato je bil logotip pri
   1920 px kar 230 px levo od vsebine. Odslej ima glava isto mero.
   ====================================================================== */

/* ⚠ Blok koraka 239 v style.css razteza ta vsebnik do 1800 px z
   , zato ga je treba povoziti prav tako. */
#apus-header .elementor-element-82fe2a5 {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Meni ima zdaj ~100 px manj prostora kot prej, zato so postavke tesnejše.
   Velikost pisave ostane enaka. */
#apus-header #primary-menu > li > a {
    padding: 10px 4px;
}

#apus-header #primary-menu {
    gap: 0;
}


/* ======================================================================
   33) »PAKETI« ENAK KOT »OBJAVI OGLAS«
   ----------------------------------------------------------------------
   Miha: isti font in ista debelina kot »Objavi oglas«.
   ====================================================================== */

#apus-header #primary-menu > li.zdr-meni-gumb--polni > a,
#apus-header #primary-menu > li.zdr-meni-gumb--polni.active > a {
    font-family: var(--zi-font-head) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    padding: 12px 18px;
}


/* --- glava: logotip in desni gumbi na isti navpičnici kot vsebina ----- */
/* Gradnik logotipa ima svoj levi odmik, zato je bil znak 10 px desno od
   iskalnika in kartic. */
#apus-header .elementor-element-a673893,
#apus-header .elementor-element-5430d2a,
#apus-header .elementor-element-5430d2a > .elementor-widget-container,
#apus-header .logo,
#apus-header .logo a {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* V vsebnik 1320 px se meni pri 15 px pisave ni vklopil – »Prijava« je
   segla 56 px čez desni rob. Postavke so zato za spoznanje manjše in
   tesnejše; gumba desno ostaneta enaka. */
/* ⚠ Velikost pisave menija je drugod zapisana z !important (koraka
   431/432), zato tudi tu. Brez tega je ostala 18 px in meni je bil
   preširok za vsebnik 1320 px. */
#apus-header #primary-menu > li > a {
    font-size: 15px !important;
    padding: 10px 5px !important;
}

#apus-header #primary-menu > li.pll-parent-menu-item > a {
    font-size: 14px;
    padding-left: 4px;
    padding-right: 0;
}

#apus-header .elementor-element-82fe2a5 {
    gap: 10px;
}


/* ======================================================================
   34) »PAKETI« DOBI ENAKO PLOSKEV KOT »OBJAVI OGLAS«
   ----------------------------------------------------------------------
   ⚠ Pravilo za postavke menija ima `padding: 10px 6px !important`, zato je
   gumb »Paketi« ostal tesen (61 × 39 px), medtem ko je »Objavi oglas«
   144 × 48. Tu mora biti odmik prav tako `!important`.
   ====================================================================== */

#apus-header #primary-menu > li.zdr-meni-gumb--polni > a,
#apus-header #primary-menu > li.zdr-meni-gumb--polni.active > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 24px !important;
    border-radius: 12px;
}

/* enak radij kot pri sosednjih gumbih */
#apus-header .login-register-btn .btn-login {
    border-radius: 12px !important;
}


/* ======================================================================
   35) HERO: BESEDILO NA ISTO NAVPIČNICO KOT ISKALNIK
   ----------------------------------------------------------------------
   ⚠ Stolpec z besedilom ima svoj odmik 15 px, iskalnik pa ne — naslov in
   kartici sta zato stala 15 px desno od iskalnika, značk in logotipa.
   Zdaj se vse začne na isti navpičnici.
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-5ff0613 > .elementor-widget-wrap {
    padding-left: 0;
}


/* ======================================================================
   36) SPUSTNI MENI: IME IN DROBEN OPIS POD NJIM
   ----------------------------------------------------------------------
   Miha, 16. 9. 2026: v podmeniju naj bo pod imenom še droben stavek,
   kaj postavka je.

   Opis izriše **tema sama** (`superio/inc/classes/megamenu.php`), takoj ko
   ima postavka izpolnjeno polje »Opis« — tu je samo slog.
   ⚠ Besedila so v Videz → Meniji → Možnosti zaslona → Opis in jih Miha
   ureja sam; v kodi jih ni.
   ====================================================================== */

#apus-header #primary-menu .dropdown-menu {
    min-width: 320px;
    padding: 10px;
}

#apus-header #primary-menu .dropdown-menu > li > a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    white-space: normal;
    font-family: var(--zi-font-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zi-gray-900);
}

#apus-header #primary-menu .dropdown-menu > li > a:hover,
#apus-header #primary-menu .dropdown-menu > li > a:focus-visible {
    background: var(--zi-primary-50);
    color: var(--zi-primary);
}

#apus-header #primary-menu .dropdown-menu .menu-item-description {
    display: block;
    /* tema postavkam menija vsili veliko zacetnico vsake besede */
    text-transform: none !important;
    margin-top: 3px;
    font-family: var(--zi-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--zi-text-muted);
}

#apus-header #primary-menu .dropdown-menu > li > a:hover .menu-item-description {
    color: var(--zi-gray-700);
}


/* ======================================================================
   37) STRANSKA VRSTICA S FILTRI JE BELA
   ----------------------------------------------------------------------
   ⚠ `.sidebar-left` je imela svojo bledo modrikasto ploskev (#F5F7FC),
   na njej pa še bele ploskve gradnikov z obrobo — videti je bilo kot
   ploskev v ploskvi. Zunanja gre ven; ostane ena bela kartica.
   ====================================================================== */

.sidebar.sidebar-left,
.filter-sidebar .sidebar.sidebar-left {
    background: transparent !important;
    border-radius: 0;
}

.sidebar.sidebar-left .widget {
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-lg);
    box-shadow: var(--zi-shadow-1);
}

/* polja v filtrih: bela z blago obrobo, kot v iskalniku na naslovnici */
.sidebar.sidebar-left .form-control,
.sidebar.sidebar-left .select2-selection {
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-md);
}

.sidebar.sidebar-left .form-control:focus,
.sidebar.sidebar-left .select2-container--open .select2-selection {
    border-color: var(--zi-primary);
}


/* ======================================================================
   38) ZNAČKA »PRIPOROČENO« NA KARTICI PAKETA
   ----------------------------------------------------------------------
   ⚠ Značka je stala 13 px NAD zgornjim robom kartice, kartica pa ima
   `overflow: hidden` (potrebuje ga zaradi zaobljenih vogalov). Zgornja
   polovica značke je bila zato odrezana in napis prerezan na pol.

   Rešitev: značka gre znotraj kartice, kartica pa dobi toliko več zraka
   na vrhu, da se z naslovom paketa ne prekrivata.
   ====================================================================== */

/* Obstojeci pravili sta vezani na oznako strani (body.page-id-9465 za
   slovensko in 1699 za angleske pakete), zato je treba doseci enako
   natancnost - sicer nastavitev tiho pade. */
.zdr-paket--izpostavljen,
body.page-id-9465 .zdr-paket--izpostavljen,
body.page-id-1699 .zdr-paket--izpostavljen {
    padding-top: 64px;
}

.zdr-paket__znacka,
body.page-id-9465 .zdr-paket__znacka,
body.page-id-1699 .zdr-paket__znacka {
    top: 16px;
    z-index: 2;
}


/* ======================================================================
   39) TEMNA ČRTA OB ROBU GUMBOV — ENKRAT ZA CEL PORTAL
   ----------------------------------------------------------------------
   ⚠⚠ Ponovitev iste pasti: tema da gumbom `border: 1px solid transparent`,
   preliv pa se riše čez ves border-box, umerjen je na padding-box in se
   PONAVLJA. V tistem enem pikslu obrobe se pokaže drugi konec preliva —
   desno temno modra, levo turkizna. Ni senca in ni obroba.

   Prvič je bilo popravljeno samo za takrat znane gumbe. Tu je pravilo
   napisano **po vzorcu imena razreda**, da zajame tudi gumbe, ki jih
   takrat ni bilo na strani (paketi, novičnik, iskalnik na O portalu,
   oddaja kontaktnega obrazca) in tiste, ki bodo šele nastali.

   ⚠ `background-repeat: no-repeat` velja SAMO za gumbe. Temne ploskve
   (hero, pas s paketi, »Zakaj Zdravstvena.info«) imajo vzorec pik, ki se
   mora ponavljati — tam se nastavi le izhodišče preliva.
   ====================================================================== */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[class*="btn"],
[class*="gumb"],
[class*="button"],
[class*="znacka"],
.open-job,
.zdr-hero-cta__del,
.wpcf7-submit,
#primary-menu > li > a {
    background-origin: border-box !important;
    background-repeat: no-repeat !important;
}

/* pasovi in gradniki s prelivom: preliv naj pokrije tudi obrobo.
   Vzorca pik se to ne dotakne — ta nima obrobe. */
.elementor-section,
.elementor-widget,
.elementor-element {
    background-origin: border-box;
}


/* Nekateri gumbi (novičnik, iskalnik na O portalu) imajo preliv zapisan s
   bližnjico `background` in z večjo natančnostjo, zato prejšnje pravilo
   tam ni prijelo. Podvojen izbirnik razreda dvigne natančnost, ne da bi
   bilo treba naštevati vsak gumb posebej. */
[class*="gumb"][class*="gumb"][class*="gumb"],
[class*="btn"][class*="btn"][class*="btn"],
[class*="button"][class*="button"][class*="button"],
button[class][class],
input[type="submit"][class][class] {
    background-origin: border-box !important;
    background-repeat: no-repeat !important;
}


/* ======================================================================
   40) STRAN POKLICI
   ----------------------------------------------------------------------
   Vsebina strani ostaja nedotaknjena (naslov, uvod, drevo, navodilo,
   pogosta vprašanja). Tu je samo videz: temen naslovni pas, kartice
   področij s prelivno črto, navodilo v beli kartici, harmonika vprašanj.

   Ovoje in nadnapise doda `inc/podoba-2026.php`.
   ====================================================================== */

/* --- naslovni pas ----------------------------------------------------- */
.zdr-drevo-hero {
    position: relative;
    margin: 0 calc(50% - 50vw) 48px;
    padding: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 56px);
    background-color: var(--zi-navy);
    background-image: var(--zi-vzorec);
    background-size: 24px 24px, auto, auto;
    overflow: hidden;
}

/* ⚠ Vsebina strani stoji v Elementorjevem/temnem vsebniku 1320 px s
   15 px odmika; pas mora imeti isto mero, sicer naslov ne stoji nad
   karticami. */
.zdr-drevo-hero__vsebina {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

.zdr-drevo-hero .zdr-drevo__glava {
    font-family: var(--zi-font-head);
    font-size: var(--zi-h1);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 16px;
}

.zdr-drevo-hero .zdr-drevo__uvod {
    max-width: 62ch;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    line-height: 1.6;
}

/* --- značke pod uvodom ------------------------------------------------ */
.zdr-drevo-hero__znacke {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.zdr-drevo-hero__znacka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--zi-radius-pill);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-family: var(--zi-font-head);
    font-size: 13px;
    font-weight: 600;
}

.zdr-drevo-hero__znacka::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zi-accent);
    flex: none;
}


/* --- kartice področij -------------------------------------------------- */
.zdr-drevo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}

.zdr-drevo__skupina {
    position: relative;
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-lg);
    box-shadow: var(--zi-shadow-1);
    padding: 24px 24px 20px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.zdr-drevo__skupina::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--zi-gradient);
}

.zdr-drevo__skupina:hover {
    box-shadow: var(--zi-shadow-3);
    transform: translateY(-2px);
}

.zdr-drevo__naslov {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--zi-gray-200);
    font-family: var(--zi-font-head);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.zdr-drevo__naslov a {
    color: var(--zi-gray-900);
}

.zdr-drevo__naslov a:hover {
    color: var(--zi-primary);
}

.zdr-drevo__poklici {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zdr-drevo__poklici > li {
    border-bottom: 1px solid var(--zi-gray-100);
}

.zdr-drevo__poklici > li:last-child {
    border-bottom: 0;
}

.zdr-drevo__poklici > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    color: var(--zi-text-muted);
    font-size: 15px;
    line-height: 1.4;
}

.zdr-drevo__poklici > li > a:hover {
    color: var(--zi-primary);
}

/* števec odprtih oglasov — ⚠ obstoječe pravilo je bolj natančno
   (.zdr-drevo__poklici .zdr-drevo__stevec), zato naštejemo obe poti */
.zdr-drevo .zdr-drevo__stevec,
.zdr-drevo__naslov .zdr-drevo__stevec,
.zdr-drevo__poklici .zdr-drevo__stevec,
.zdr-drevo__poklici > li > a .zdr-drevo__stevec {
    flex: none;
    min-width: 24px;
    padding: 2px 8px;
    border-radius: var(--zi-radius-pill);
    background: var(--zi-primary-50);
    color: var(--zi-primary-600);
    font-family: var(--zi-font-head);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.zdr-drevo__vsi {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--zi-font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--zi-primary);
}

.zdr-drevo__vsi:hover {
    color: var(--zi-primary-600);
}


/* --- »Kako uporabiti ta seznam« --------------------------------------- */
.zdr-drevo-navodilo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.2fr);
    gap: clamp(24px, 4vw, 48px);
    margin: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
    padding: clamp(28px, 4vw, 44px);
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-lg);
    box-shadow: var(--zi-shadow-1);
    overflow: hidden;
}

.zdr-drevo-navodilo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--zi-gradient);
}

.zdr-drevo-navodilo h2 {
    font-family: var(--zi-font-head);
    font-size: var(--zi-h2);
    line-height: 1.15;
    letter-spacing: -.015em;
    font-weight: 800;
    color: var(--zi-gray-900);
    margin: 0;
}

.zdr-drevo-navodilo__besedilo p {
    margin: 0 0 14px;
    color: var(--zi-text-muted);
    font-size: 16px;
    line-height: 1.65;
}

.zdr-drevo-navodilo__besedilo p:last-child {
    margin-bottom: 0;
}

.zdr-drevo-navodilo__besedilo a {
    color: var(--zi-primary);
    font-weight: 600;
}

@media (max-width: 767px) {
    .zdr-drevo-navodilo {
        grid-template-columns: 1fr;
    }
}


/* --- pogosta vprašanja ------------------------------------------------- */
.zdr-poklici-faq h2 {
    font-family: var(--zi-font-head);
    font-size: var(--zi-h2);
    line-height: 1.15;
    letter-spacing: -.015em;
    font-weight: 800;
    color: var(--zi-gray-900);
    margin: 0 0 24px;
}

.zdr-poklici-faq__par {
    background: var(--zi-surface);
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-md);
    box-shadow: var(--zi-shadow-1);
    margin-bottom: 12px;
    overflow: hidden;
}

.zdr-poklici-faq__par > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    font-family: var(--zi-font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--zi-gray-900);
}

.zdr-poklici-faq__par > summary::-webkit-details-marker {
    display: none;
}

.zdr-poklici-faq__par > summary::after {
    content: "+";
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--zi-primary-50);
    color: var(--zi-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.zdr-poklici-faq__par[open] > summary::after {
    content: "–";
}

.zdr-poklici-faq__par[open] > summary {
    color: var(--zi-primary);
}

.zdr-poklici-faq__par > p {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--zi-text-muted);
    font-size: 15px;
    line-height: 1.6;
}


/* ======================================================================
   41) GUMBI V KORAKIH OBJAVE NA SREDINO IN V ISTO VRSTO
   ----------------------------------------------------------------------
   Miha, 17. 9. 2026: »gumbe na sredino«.

   Besedila korakov so različno dolga, zato so gumbi stali na treh različnih
   višinah. Zdaj so vodoravno na sredini kartice in potisnjeni na dno, da
   vsi trije stojijo v isti vrsti.
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .item-inner {
    display: flex;
    flex-direction: column;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .widget-features-box.style1 .features-box-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-363341b .zdr-korak__gumb {
    margin-top: auto;
    padding-top: 20px;
    text-align: center;
}


/* ======================================================================
   42) PAS Z LOGOTIPI DELODAJALCEV
   ----------------------------------------------------------------------
   Miha, 17. 9. 2026: »naredi večje kvadrate, da se bodo videli kvadratni
   in podolgovati logotipi. Ni treba, da so v okvirčkih. Lahko daš
   background bel, da mi ni treba odstranjevati belega ozadja.«

   ⚠⚠ **Glavni razlog, da se logotipi niso videli, ni bila velikost.**
   Tema jih izriše v `grayscale(1)` pri `opacity: .5` — torej sivo in
   napol prosojno. Zdaj so v polni barvi.

   Polje ni več okvirček: bela ploskev brez obrobe in brez sence. Bela
   podlaga je namenoma — logotip z belim ozadjem se zlije z njo in ga ni
   treba obrezovati.

   Vrtiljak izklopi `zdr_podoba_znamke_brez_vrtiljaka()` v
   `inc/podoba-2026.php`; polja se odslej zlagajo v vrstice.
   ====================================================================== */

/* --- logotipi v polni barvi ------------------------------------------ */
.widget-brand .brand-item img,
.widget-brand .brand-item a:hover img,
.elementor-widget-apus_element_brands .brand-item img {
    filter: none !important;
    opacity: 1 !important;
}

/* --- razporeditev ----------------------------------------------------- */
.zdr-znamke {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    margin: 0;
}

/* 340 px je izbran tako, da se pri 1290 px vsebine v vrsto vklopijo TRI
   polja in se raztegnejo čez celo širino — šest logotipov da urejena 3 + 3.
   Ob sedmem se zadnja vrstica postavi na sredino. */
.widget-brand .brand-item {
    flex: 1 1 340px;
    max-width: 460px;
    min-width: 0;
    float: none;
    margin: 0;
    padding: 0;
}

.widget-brand .brand-item > a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 140px;
    padding: 20px 26px;
    background: var(--zi-surface);
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.widget-brand .brand-item > a:hover {
    transform: translateY(-2px);
    box-shadow: var(--zi-shadow-2);
}

/* Podolgovat logotip omejuje širina, kvadratnega višina — zato oboje.
   `contain` poskrbi, da se noben ne razpotegne. */
.widget-brand .brand-item img {
    max-width: 100%;
    max-height: 84px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    /* dve polji v vrsto; pri 220 px bi ostalo eno samo in preozko */
    .widget-brand .brand-item {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
    }

    .widget-brand .brand-item > a {
        min-height: 110px;
        padding: 14px 14px;
    }

    .widget-brand .brand-item img {
        max-height: 62px;
    }
}


/* ======================================================================
   43) »SLEDI NAM« IN IKONE DRUŽBENIH OMREŽIJ
   ----------------------------------------------------------------------
   Miha, 17. 9. 2026: »Sledi nam bold, ikone mnogo večje in poravnane na
   isti vodoravnici.«

   ⚠ Prejšnja nastavitev je padla: napis je ostal 25 px in navaden,
   obroba ikon pa 0 px. Elementorjeva pravila za ta gradnika so bolj
   natančna, zato je tu vse zapisano z `!important`.
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-4f887f6 .elementor-heading-title {
    font-family: var(--zi-font-head) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--zi-gray-900) !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* --- ikone ------------------------------------------------------------ */
:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-social-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid var(--zi-gray-300) !important;
    border-radius: 50% !important;
    color: var(--zi-primary) !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-social-icon:hover {
    background: var(--zi-primary-50) !important;
    border-color: var(--zi-primary) !important;
    transform: translateY(-2px);
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-social-icon i,
:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-social-icon svg {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 1 !important;
}

/* --- ena vodoravnica za napis in ikone -------------------------------- */
/* Naslov gradnika ima svojo višino vrstice; brez tega je bil napis 5 px
   nad sredino ikon. */
:is(.elementor-9348, .elementor-8610) .elementor-element-24a9046 > .elementor-widget-wrap {
    align-items: center !important;
    gap: 14px;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-4f887f6 > .elementor-widget-container,
:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb > .elementor-widget-container {
    display: flex;
    align-items: center;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-grid,
:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-grid-item {
    display: flex !important;
    align-items: center;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-7591fcb .elementor-grid {
    gap: 10px;
}


/* ======================================================================
   44) »ZAPOSLITVE NA E-POŠTO« NA TEMNO MODRI PLOSKVI
   ----------------------------------------------------------------------
   Miha, 17. 9. 2026: »tale sektor daj ozadje kot je tukaj, modro« —
   ista ploskev kot pas s paketi.

   ⚠ Razdelek je bil prej narejen svetel (razdelek 15) in ima barve
   zapisane z `!important`; tu jih je zato treba povoziti prav tako.
   ====================================================================== */

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 {
    background-color: var(--zi-navy) !important;
    background-image: var(--zi-vzorec) !important;
    background-size: 24px 24px, auto, auto !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .elementor-heading-title,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 h2,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 h3 {
    color: #fff !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .elementor-widget-text-editor,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .elementor-widget-text-editor p {
    color: rgba(255, 255, 255, .78) !important;
}

/* na temni podlagi je preliv v naslovu svetlejši, sicer izgine */
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-preliv,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-preliv--temno {
    background: linear-gradient(135deg, #5FA8FF 0%, #3FE0D0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* bela kartica z obrazcem ostane bela – na modrem je zdaj še bolj vidna */
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice {
    background: var(--zi-surface);
}


/* ======================================================================
   45) »SLEDI NAM« NA TELEFONU
   ----------------------------------------------------------------------
   ⚠ Stolpec se je na telefonu začel pri 0 px, naslov razdelka pa pri 15 —
   napis je bil zato prilepljen na rob zaslona.
   ====================================================================== */

@media (max-width: 991px) {
    /* ⚠ Pravilo v razdelku 36 ima , zato mora biti
       tudi tu !important. */
    :is(.elementor-9348, .elementor-8610) .elementor-element-24a9046 > .elementor-widget-wrap {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ⚠ Pravilo za bel naslov zgoraj zajame tudi naslov ZNOTRAJ bele kartice
   (»Zaposlitve na e-pošto«) in ta je postal bel na belem. Vsebina kartice
   zato barve dobi nazaj. */
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice__naslov,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice h2,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice h3 {
    color: var(--zi-gray-900) !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice__poved,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice p,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice label,
:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice span {
    color: var(--zi-text-muted) !important;
}

:is(.elementor-9348, .elementor-8610) .elementor-element-49bfb137 .zdr-enovice__oznaka {
    color: var(--zi-gray-900) !important;
}


/* ======================================================================
   46) FILTRI V STRANSKI VRSTICI: VSA POLJA PO ISTEM KOPITU
   ----------------------------------------------------------------------
   ⚠ Vtis »nekje belo, nekje bež, nekje sivo« so delali trije različni
   odtenki obrobe: na strani Proste zaposlitve rgba(11,35,64,.12), na
   arhivih poklicev #DFE3EA, spustna seznama pa #E3E8EF. Besedilo v
   spustnih seznamih je bilo poleg tega nevtralno sivo (#696969) sredi
   samih modrikasto sivih (#6B7789) — in nevtralno sivo med modrikastimi
   izpade toplo, bež.

   ⚠ Select2 si ploskev nariše sam: `.select2-selection` je imela svojo
   notranjo oblogo (10px), `.select2-selection__rendered` pa še svojo
   (16px) — skupaj 73 px namesto 48. Zato sta okni Kategorija in Vrsta
   zaposlitve štrleli iz vrste polj.

   Vzor je polje »Lokacija« na strani Proste zaposlitve. Tega se ne
   dotikamo; vsa ostala polja se poravnajo nanj.
   ⚠ Pravila v `style.css` so vezana na `body.page-template-page-jobs`
   (0,5,1), zato je tudi tu povsod `body` na začetku in `!important` —
   sicer tiho padejo.
   ====================================================================== */

body .sidebar.sidebar-left .form-group-inner {
    position: relative;
}

/* ---------- ploskev polja ---------- */
body .sidebar.sidebar-left .form-group input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body .sidebar.sidebar-left .form-group select.form-control:not(.select2-hidden-accessible),
body .sidebar.sidebar-left .form-group .select2-container--default .select2-selection--single {
    box-sizing: border-box !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 13px 0 50px !important;
    background-color: var(--zi-surface) !important;
    border: 1px solid var(--zi-gray-200) !important;
    border-radius: var(--zi-radius-md) !important;
    box-shadow: none !important;
    font-family: 'Source Sans 3', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 46px !important;
    color: var(--zi-gray-900) !important;
}

/* select2 vsebino izriše v svojem zavitku – ta prevzame mere polja */
body .sidebar.sidebar-left .form-group .select2-container {
    width: 100% !important;
}

/* ⚠ `.select2-selection` v temi ni bila `relative`, zato se je puščica
   postavljala glede na višji ovoj in je ob večji višini zlezla nad polje.
   Poleg tega rabi desno oblogo, da besedilo ne zleze pod puščico. */
body .sidebar.sidebar-left .form-group .select2-container--default .select2-selection--single {
    position: relative !important;
    padding-right: 40px !important;
}

body .sidebar.sidebar-left .form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 46px !important;
    padding: 0 !important;
    line-height: 46px !important;
    font-family: 'Source Sans 3', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--zi-gray-900) !important;
}

/* dokler ni izbrano, mora biti besedilo enako bledo kot v vnosnih poljih */
body .sidebar.sidebar-left .form-group .select2-selection__placeholder {
    color: var(--zi-gray-500) !important;
    font-weight: 600 !important;
}

body .sidebar.sidebar-left .form-group ::placeholder {
    color: var(--zi-gray-500) !important;
    font-weight: 600 !important;
    opacity: 1;
}

/* ---------- puščica na sredino višine ---------- */
body .sidebar.sidebar-left .form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    /* ⚠ tema puščici doda `transform: translateY(-50%)`; ta ostane tudi po
       nastavitvi `top`, zato je puščica zlezla 23 px nad polje. */
    top: 1px !important;
    transform: none !important;
    right: 14px !important;
    width: 16px !important;
    height: 44px !important;
}

body .sidebar.sidebar-left .form-group .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--zi-gray-500) !important;
}

/* ---------- ikone levo: ista lega, velikost in barva na vseh straneh ---------- */
body .sidebar.sidebar-left .form-group-inner > i[class*="flaticon-"] {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: var(--zi-text-muted) !important;
    pointer-events: none;
    z-index: 2;
}

/* ⚠ »Vrsta zaposlitve« edina nima ikone v HTML-ju, zato je besedilo
   začenjalo drugje kot v treh poljih nad njo. Ura pride iz istega
   nabora (Flaticon) kot ostale tri. */
body .sidebar.sidebar-left .form-group-type .form-group-inner::before {
    content: "\f110";
    font-family: 'Flaticon';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    color: var(--zi-text-muted);
    pointer-events: none;
    z-index: 2;
}

/* ---------- ko je polje v žarišču ---------- */
body .sidebar.sidebar-left .form-group input.form-control:focus,
body .sidebar.sidebar-left .form-group .select2-container--open .select2-selection--single {
    border-color: var(--zi-primary) !important;
    box-shadow: none !important;
}


/* ======================================================================
   47) FILTRI NA ARHIVIH PO ISTEM KOPITU KOT PROSTE ZAPOSLITVE
   ----------------------------------------------------------------------
   ⚠ Pravila za stransko vrstico v `style.css` so vezana na
   `body.page-template-page-jobs`, zato so veljala samo na strani Proste
   zaposlitve. Na arhivih poklicev je zato ostal temin videz: oznake
   18px/500 v skoraj črni (#202124), postavke 15px/400 v nevtralno sivi
   (#696969) in izbirni gumbi, ki jih tema nariše kot stikala.

   Tu so iste vrednosti prepisane na `body .sidebar.sidebar-left`, ki je
   na obeh straneh. Na strani Proste zaposlitve so vrednosti enake, kot
   so že — ta stran se torej ne premakne; poravnajo se arhivi.
   ====================================================================== */

/* ---------- naslov gradnika ---------- */
body .sidebar.sidebar-left .widget-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--zi-navy) !important;
}

/* ---------- oznaka nad poljem ---------- */
body .sidebar.sidebar-left .form-group > label,
body .sidebar.sidebar-left .form-group .heading-label,
body .sidebar.sidebar-left .filter-title {
    display: block !important;
    font-family: 'Source Sans 3', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 13px !important;
    color: var(--zi-gray-700) !important;
    margin: 0 0 10px !important;
}

body .sidebar.sidebar-left .form-group {
    margin-bottom: 22px !important;
}

/* ---------- seznami izbir (datum objave, raven izkušenj) ---------- */
body .sidebar.sidebar-left .form-group ul,
body .sidebar.sidebar-left .list-checkbox {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

body .sidebar.sidebar-left .form-group .list-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .sidebar.sidebar-left .form-group li label,
body .sidebar.sidebar-left .list-checkbox label {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Source Sans 3', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    /* ⚠ 1.75 je vrednost, ki jo ima vzor; z 1.5 se je stolpec filtrov
       skrajšal za 47 px in stran Proste zaposlitve se je premaknila. */
    line-height: 1.75 !important;
    color: var(--zi-gray-700) !important;
    cursor: pointer;
}

/* ⚠ Tema izbirne gumbe skrije in prek oznake nariše svoja stikala. Na
   arhivih je to ostalo vklopljeno, na Prostih zaposlitvah ne — zato sta
   bili strani videti kot dve različni obliki. Okrasje gre stran, vidi se
   pravi gumb (tudi zaradi dostopnosti). */
body .sidebar.sidebar-left .form-group input[type="checkbox"],
body .sidebar.sidebar-left .form-group input[type="radio"] {
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex: none !important;
    accent-color: var(--zi-primary) !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

body .sidebar.sidebar-left .form-group input[type="checkbox"] { -webkit-appearance: checkbox !important; }
body .sidebar.sidebar-left .form-group input[type="radio"] { -webkit-appearance: radio !important; }

body .sidebar.sidebar-left .form-group .list-item label::before,
body .sidebar.sidebar-left .form-group .list-item label::after {
    display: none !important;
    content: none !important;
}

/* ---------- »Prikaži več« ---------- */
body .sidebar.sidebar-left .toggle-filter-list {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    font-family: 'Source Sans 3', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    color: var(--zi-primary) !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

body .sidebar.sidebar-left .toggle-filter-list i {
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: var(--zdr-a-poudarek, #EAF2FB) !important;
    color: var(--zi-primary) !important;
    font-size: 10px !important;
}


/* ======================================================================
   48) TUJE BARVE VEN: VSA OBVESTILA IN ZNAČKE V NAŠI PALETI
   ----------------------------------------------------------------------
   Popis izmerjenih tujih barv (pobrane iz izrisanih strani, ne iz kode):

   • #16A34A / #F0FDF4 / #BBF7D0 / #14532D — zeleno obvestilo »Registracija
     delodajalca je brezplačna« (Tailwindova paleta, ne naša)
   • #34A853 — Googlova zelena iz teme Superio: krona »izpostavljeno«,
     gumb `.btn-theme-second`, značka »priporočeno«, števci na plošči
   • #127a53 / #EAFBF2 — značka »Prijave odprte« na oglasu
   • #146B3A — odziv obrazca za e-novice
   • #FCF8E3 / #FAEBCC / #8A6D3B — Bootstrapovo opozorilo »za dostop se
     morate prijaviti« (privzeto iz ogrodja, s pravokotnimi vogali)

   Vse to gre v našo paleto: temno modra za besedilo, blaga turkizna
   ploskev za pozitivna stanja, preliv za značke. Oblike se poenotijo z
   ostalim portalom: radij 12 px, naša pisava, naši razmiki.

   ⚠ Turkizna #1FBFB0 je presvetla za besedilo (razmerje 2.1 : 1), zato
   je za pisavo dodan temnejši odtenek #0B6E66 (5.6 : 1 na naši ploskvi).
   ====================================================================== */

:root {
    --zi-accent-700: #0B6E66;
}

/* ---------- obvestilo »registracija je brezplačna« ---------- */
.zdr-brezplacno {
    border: 1px solid var(--zi-accent-50) !important;
    border-left: 3px solid var(--zi-accent) !important;
    border-radius: var(--zi-radius-md) !important;
    background: var(--zi-accent-50) !important;
    color: var(--zi-navy) !important;
}

.zdr-brezplacno__besedilo strong {
    color: var(--zi-navy) !important;
}

.zdr-brezplacno__znak {
    background: var(--zi-gradient) !important;
}

/* ---------- Bootstrapova obvestila ---------- */
.alert {
    border-radius: var(--zi-radius-md) !important;
    border: 1px solid var(--zi-gray-200) !important;
    background: var(--zi-gray-100) !important;
    color: var(--zi-gray-900) !important;
    font-family: var(--zi-font-body) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding: 14px 18px !important;
    box-shadow: none !important;
}

.alert-warning {
    border-color: var(--zi-warning-50) !important;
    border-left: 3px solid var(--zi-warning) !important;
    background: var(--zi-warning-50) !important;
    color: var(--zi-navy) !important;
}

.alert-success,
.woocommerce-message {
    border-color: var(--zi-accent-50) !important;
    border-left: 3px solid var(--zi-accent) !important;
    background: var(--zi-accent-50) !important;
    color: var(--zi-navy) !important;
}

.alert-danger,
.alert-error,
.woocommerce-error {
    border-color: var(--zi-danger-50) !important;
    border-left: 3px solid var(--zi-danger) !important;
    background: var(--zi-danger-50) !important;
    color: var(--zi-navy) !important;
}

.alert-info,
.woocommerce-info {
    border-color: var(--zi-primary-50) !important;
    border-left: 3px solid var(--zi-primary) !important;
    background: var(--zi-primary-50) !important;
    color: var(--zi-navy) !important;
}

.alert a,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--zi-primary) !important;
    font-weight: 700;
}

/* ---------- krona »izpostavljeno« ob naslovu oglasa ---------- */
span.featured {
    background: var(--zi-gradient) !important;
    background-color: transparent !important;
    color: #fff !important;
}

/* ---------- značke stanja: odprto / izvedeno / aktivno ---------- */
.zdr-prijava__stanje--odprto,
body.single-job_listing .zdr-prijava__stanje--odprto,
.zdr-boost--izveden .zdr-boost__stanje,
.zdr-boost--izveden .zdr-boost__ikona,
.zdr-paket-vrstica--aktiven .zdr-paket-vrstica__stanje,
.subwoo-inner .recommended {
    background: var(--zi-accent-50) !important;
    color: var(--zi-accent-700) !important;
}

.zdr-boost--izveden,
.zdr-paket-vrstica--aktiven {
    border-left-color: var(--zi-accent) !important;
}

.zdr-boost__potrjeno {
    color: var(--zi-accent-700) !important;
}

/* ---------- odziv obrazca za e-novice ---------- */
.zdr-enovice-obvestilo--ok,
.zdr-enovice__odziv--ok {
    background: var(--zi-accent-50) !important;
    color: var(--zi-accent-700) !important;
}

/* ---------- zeleni pripomočki iz teme Superio ---------- */
.btn-theme-second {
    background: var(--zi-gradient) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #fff !important;
}

.btn-theme-second:hover,
.btn-theme-second:focus,
.btn-theme-second:active,
.btn-theme-second.active {
    background: var(--zi-gumb-preliv-hover, var(--zi-gradient)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.btn-theme-second .badge {
    color: var(--zi-primary) !important;
}

.btn-readmore.green-color {
    color: var(--zi-primary) !important;
}

.btn-readmore.green-color:after {
    background-color: var(--zi-primary) !important;
}

.job-grid .employer-title a {
    color: var(--zi-primary) !important;
}

.statistics .shortlist .icon {
    color: var(--zi-primary) !important;
    background: var(--zi-primary-50) !important;
}

.statistics .shortlist .number-count {
    color: var(--zi-primary) !important;
}

.dashboard-notifications-wrapper ul i.flaticon-envelope,
.dashboard-notifications-wrapper ul i.flaticon-briefcase {
    color: var(--zi-primary) !important;
}


/* ======================================================================
   49) ŠE OPOZORILNE IN NAPAČNE BARVE V NAŠO PALETO
   ----------------------------------------------------------------------
   Poleg zelenih so bile v portalu še tri tuje družine:
   • jantarna iz Googlove palete — #f9ab00 / #fef7e0 / #b06000
     (porabljen paket, potekel rok, potekel oglas, opozorilo pri Boostu)
   • rdeče iz treh različnih virov — #d93025, #99201F / #FDEDED,
     #B23B3B, #C62828 / #E44343, #FDEEEE (obrazci, brisanje, e-novice)
   • #FDEEEE + rgba(197,48,48,.18) — WooCommercova napaka

   Vse gredo na naša žetona `--zi-warning` in `--zi-danger`.

   ⚠ Naša oranžna #E0791C je za besedilo prešibka (2.7 : 1 na svoji
   ploskvi), enako naša rdeča (3.8 : 1). Za pisavo sta zato dodana
   temnejša odtenka iz iste družine: #A9520B (4.8 : 1) in #A32A2A
   (6.2 : 1). Ploskev in obroba ostaneta žetona.

   ⚠ Barve družbenih omrežij (Pinterest, Instagram) so NAMENOMA tuje —
   to so znamke teh omrežij in ne naš CGP.
   ====================================================================== */

:root {
    --zi-warning-700: #A9520B;
    --zi-danger-700: #A32A2A;
}

/* ---------- opozorilna stanja ---------- */
.zdr-paket-vrstica--porabljen {
    border-left-color: var(--zi-warning) !important;
}

.zdr-paket-vrstica--porabljen .zdr-paket-vrstica__stanje,
.zdr-oglas-potekel::after {
    background: var(--zi-warning-50) !important;
    color: var(--zi-warning-700) !important;
}

.zdr-boost__opozorilo,
.zdr-rok--potekel {
    color: var(--zi-warning-700) !important;
}

/* ---------- napake in brisanje ---------- */
.zdr-obrazec-kartica .wpcf7-not-valid-tip,
.wpcf7-not-valid-tip,
.zdr-kolicina__brisi,
.zdr-kolicina__brisi:hover {
    color: var(--zi-danger-700) !important;
}

.zdr-enovice-obvestilo--ni,
.zdr-enovice__odziv--ni {
    background: var(--zi-danger-50) !important;
    color: var(--zi-danger-700) !important;
    border-color: rgba(214, 69, 69, .25) !important;
}

.zdr-enovice-obvestilo--ok,
.zdr-enovice__odziv--ok {
    border-color: rgba(31, 191, 176, .25) !important;
}

.woocommerce-page .woocommerce-error {
    background: var(--zi-danger-50) !important;
    border-color: rgba(214, 69, 69, .18) !important;
}

.woocommerce-page .woocommerce-message {
    background: var(--zi-accent-50) !important;
    border-color: rgba(31, 191, 176, .18) !important;
}

.zdr-gumb-brisi:focus {
    background: var(--zi-danger-50) !important;
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .30) !important;
}

.apus-header .top-wrapper-menu:hover .name-acount i,
.close-sidebar-btn:focus {
    color: var(--zi-danger) !important;
}


/* ======================================================================
   50) BLEDA POLJA DOBIJO PRELIVNO OBROBO
   ----------------------------------------------------------------------
   Miha: »povsod, kjer so taka okna in gre do iste ali podobne barve kot
   ozadje, dodaj obrobo kot jo ima gumb Prijava, da bo bolj vidno«.

   Portal sem prehodil s skripto, ki primerja ploskev polja z ozadjem
   strani. Bleda polja imajo ploskev `#F0F5F7` in obrobo **iste barve** —
   razlika od ozadja `#F6F8FB` je 13 od 765, torej praktično nič. Najdeni
   sta dve družini:
   • obrazci CMB2 (`.cmb-form`): registracija delodajalca SL in EN ter
     obrazci na straneh za prijavljenega delodajalca
   • spustnik »Razvrsti po« nad seznamom zadetkov (arhivi, seznam, trgovina)

   ⚠ Iskalno polje na strani Aktualno je bil lažen alarm: samo polje je
   res brez obrobe, ima pa jo ovoj okoli njega — vidno je.

   ⚠ CSS obrobe v prelivu ne pozna. Uporabljen je isti recept kot pri
   gumbu »Prijava« v glavi: dve plasti ozadja — bela notranjost na
   `padding-box` in preliv pod njo na `border-box`.
   ⚠⚠ `background-origin` MORA biti `border-box`, sicer se v pikslu obrobe
   pokaže drugi konec preliva in nastane tista temna črta ob robu, ki jo
   je Miha dvakrat javil (glej razdelek 19).
   ====================================================================== */

.cmb-form .regular-text,
.cmb-form input[type="text"],
.cmb-form input[type="email"],
.cmb-form input[type="password"],
.cmb-form input[type="tel"],
.cmb-form input[type="url"],
.cmb-form input[type="number"],
.cmb-form textarea,
.cmb-form select:not(.select2-hidden-accessible),
.cmb2-wrap .regular-text,
.cmb2-wrap textarea,
form.jobs-ordering .select2-container--default .select2-selection--single,
form.woocommerce-ordering .select2-container--default .select2-selection--single {
    border: 1px solid transparent !important;
    border-radius: var(--zi-radius-md) !important;
    background-color: transparent !important;
    background-image: linear-gradient(var(--zi-surface), var(--zi-surface)), var(--zi-gradient) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    color: var(--zi-gray-900) !important;
    font-family: var(--zi-font-body) !important;
}

/* v žarišču se obroba zadebeli, da je jasno, kje si */
.cmb-form .regular-text:focus,
.cmb-form input[type="text"]:focus,
.cmb-form input[type="email"]:focus,
.cmb-form input[type="password"]:focus,
.cmb-form input[type="tel"]:focus,
.cmb-form input[type="url"]:focus,
.cmb-form input[type="number"]:focus,
.cmb-form textarea:focus,
.cmb2-wrap .regular-text:focus,
.cmb2-wrap textarea:focus,
form.jobs-ordering .select2-container--open .select2-selection--single,
form.woocommerce-ordering .select2-container--open .select2-selection--single {
    border-width: 2px !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(17, 96, 180, .10) !important;
}

/* ---------- gumb pod obrazcem CMB2 ---------- */
/* ⚠ »Registriraj se zdaj« je bil ploska Googlova modra #1967D2 brez
   preliva — edini gumb na strani, ki ni bil naš. */
.cmb-form .button-primary,
.cmb2-wrap .button-primary,
input.button-primary,
button.button-primary {
    background: var(--zi-gumb-preliv, var(--zi-gradient)) !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--zi-radius-md) !important;
    color: #fff !important;
    font-family: var(--zi-font-head) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.cmb-form .button-primary:hover,
.cmb2-wrap .button-primary:hover,
input.button-primary:hover,
button.button-primary:hover {
    background: var(--zi-gumb-preliv-hover, var(--zi-gradient)) !important;
    color: #fff !important;
}


/* ======================================================================
   51) SIVI ROB ZNOTRAJ BELE KARTICE S FILTRI
   ----------------------------------------------------------------------
   Miha: »sidebar background ni povsod bel, izgleda kot nek bež rob«.

   ⚠⚠ Ni bila ploskev — vse so bile bele (izmerjeno). Bil je **senca
   obrazca, ki pada na kartico pod njim**. Pravilo »enotna mehka senca na
   vseh škatlah« v `style.css` (razdelek 4) zajame tudi
   `.widget-job-search-form form`. Ta obrazec je prosojen, širok 300 px in
   stoji sredi bele kartice, široke 350 px — njegova senca se je zato
   risala po beli ploskvi, ne mimo nje.

   Izmerjeno z vzorčenjem vrstice pikslov čez kartico: od notranjega roba
   navznoter 24 px prehoda z 255,255,255 na 244,244,246 na obeh straneh.

   ⚠ Zakaj je videti bež in ne sivo: 244,244,246 je skoraj **nevtralno
   siva**, okolica pa je modrikasta (246,248,251). Nevtralna siva med
   modrikastimi vedno izpade toplo. Ista past kot pri besedilu #696969 v
   razdelku 46.

   ⚠ Senca je tako široka, ker je `--zi-shadow-1` v `style.css` na vrstici
   15205 na novo določena (`0 8px 24px`) — večja od prve definicije.

   Kartica senco obdrži, obrazec v njej je ne rabi.
   ====================================================================== */

body .sidebar.sidebar-left .widget form,
body .sidebar.sidebar-left form.form-search,
body .sidebar.sidebar-left .filter-listing-form-wrapper,
body .sidebar.sidebar-left .widget-job-search-form form {
    box-shadow: none !important;
}


/* ======================================================================
   52) »RAZVRSTI PO« IN OBROBNI GUMBI — ENAKA BARVA KOT DRUGOD
   ----------------------------------------------------------------------
   Miha: »poglej vse gumbe po strani, tukaj tudi barva nekaj odstopa«
   (spustnik »Razvrsti po«).

   Popis vseh 117 gumbov na enajstih straneh je pokazal 20 različnih
   videzov. Trije so bili prava odstopanja:

   ⚠⚠ **Spustnik »Razvrsti po«** je imel prelivno obrobo (razdelek 50), a
   je bil znotraj **bled, ne bel**. Vzrok: bela plast je na zunanjem
   elementu, `.select2-selection__rendered` v njem pa ima svojo ploskev
   `#F0F5F7` iz teme in jo prekrije. Besedilo je bilo povrhu 15px/400 v
   nevtralno sivi `#696969` — drugod je 13.5px/600 v temno modri.

   ⚠ **Obrobni gumbi v treh različnih modrih:** `#1160B4` (»Vsa delovna
   mesta«), `#0E4F94` (»Oglejte si pakete«, »Pišite nam«) in spet `#1160B4`,
   a v drugi pisavi (povezava na spletno stran delodajalca, Source Sans
   namesto Manrope). Vsi gredo na `--zi-primary` in Manrope.

   ⚠ **Gumb klepeta** je bil na eni strani v pisavi Sora, drugod v Manrope.
   ====================================================================== */

/* ---------- spustnik »Razvrsti po« ---------- */
form.jobs-ordering .select2-container--default .select2-selection--single,
form.woocommerce-ordering .select2-container--default .select2-selection--single {
    height: 48px !important;
    padding: 0 40px 0 16px !important;
    position: relative !important;
}

/* ⚠ Notranji element ima svojo ploskev iz teme in prekrije belo plast
   prelivne obrobe — zato mora biti prosojen. */
form.jobs-ordering .select2-selection__rendered,
form.woocommerce-ordering .select2-selection__rendered {
    background: transparent !important;
    height: 46px !important;
    padding: 0 !important;
    line-height: 46px !important;
    font-family: var(--zi-font-body) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--zi-gray-900) !important;
}

form.jobs-ordering .select2-selection__placeholder,
form.woocommerce-ordering .select2-selection__placeholder {
    color: var(--zi-gray-500) !important;
    font-weight: 600 !important;
}

form.jobs-ordering .select2-selection__arrow,
form.woocommerce-ordering .select2-selection__arrow {
    top: 1px !important;
    transform: none !important;
    right: 14px !important;
    width: 16px !important;
    height: 44px !important;
}

form.jobs-ordering .select2-selection__arrow b,
form.woocommerce-ordering .select2-selection__arrow b {
    border-top-color: var(--zi-gray-500) !important;
}

/* ---------- obrobni gumbi v eni modri ---------- */
.elementor-button.elementor-button-link[class*="size-"]:not(.zdr-gumb--polni),
.btn.btn-theme-light {
    font-family: var(--zi-font-head) !important;
}

/* ⚠ Obrobnih gumbov v Elementorju je zunaj naslovnice natanko troje in
   dva sta v temnejši modri ; tretji (»Ogled paketov« na strani
   O nas) je že pravi. Zato sta naslovljena po oznaki gradnika — širše
   pravilo bi zadelo tudi polne, prelivne gumbe, ki nimajo svojega razreda. */
body.page-id-9457 .elementor-element-c0e5db1 .elementor-button,
body.page-id-9465 .elementor-element-0924947 .elementor-button,
body .elementor-element-c0e5db1 .elementor-button,
body .elementor-element-0924947 .elementor-button {
    color: var(--zi-primary) !important;
    border-color: var(--zi-primary) !important;
    font-family: var(--zi-font-head) !important;
}

.btn.btn-theme-light {
    background: var(--zi-primary-50) !important;
    border-color: var(--zi-primary) !important;
    color: var(--zi-primary) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
}

/* ---------- gumb klepeta v isti pisavi povsod ---------- */
.zdr-bot__sprozilec {
    font-family: var(--zi-font-head) !important;
}


/* ======================================================================
   53) UGLEDNI DELODAJALCI: 20 PX MED KARTICAMI
   ----------------------------------------------------------------------
   Miha: »20 px spacinga med karticami, gor dol levo desno vsaka kartica«.

   Mreža je bila Bootstrapova: stolpci `col-md-4` z oblogo 15 px na vsaki
   strani (skupaj 30 px vodoravno) in **brez razmika navpično** — druga
   vrsta se je dotikala prve.

   Namesto popravljanja oblog gre vrsta na CSS mrežo: en `gap` ureja obe
   smeri, kartice pa se hkrati raztegnejo na enako višino.
   ⚠ Vezano na naš razred `.zdr-ugledni__mreza`, ne na `.row` — ta je v
   temi povsod.
   ====================================================================== */

.zdr-ugledni__mreza .widget-content > .row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 !important;
}

/* ⚠⚠ Bootstrapova vrsta ima `::before` in `::after` (počistek plavajočih
   stolpcev). V mreži postaneta polnopravni celici — prva kartica je zato
   pristala v drugem stolpcu, zadnja vrsta pa je ostala na pol prazna. */
.zdr-ugledni__mreza .widget-content > .row::before,
.zdr-ugledni__mreza .widget-content > .row::after {
    display: none !important;
}

.zdr-ugledni__mreza .widget-content > .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.zdr-ugledni__mreza .widget-content > .row > [class*="col-"] > article {
    height: 100%;
}

@media (max-width: 991px) {
    .zdr-ugledni__mreza .widget-content > .row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .zdr-ugledni__mreza .widget-content > .row { grid-template-columns: 1fr; }
}


/* ======================================================================
   54) SORODNI ČLANKI: VSE KARTICE ENAKO VISOKE
   ----------------------------------------------------------------------
   Miha: »sorodni članki in vsi box članki in prispevki isti height«.

   Izmerjeno: 476 / 500 / 523 / 500 px — kartica je bila tako visoka, kot
   je bilo besedila v njej.

   ⚠ Vrtiljak Slick postavke plava (`float`) in vsaki da svojo višino.
   Zato gre proga na `flex`, postavke na `height: auto` in kartica na
   `height: 100%`; opis znotraj kartice dobi `flex: 1`, da se prazen
   prostor nabere pod besedilom in ne pod kartico.
   ====================================================================== */

.related-posts .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

.related-posts .slick-slide {
    height: auto !important;
    float: none !important;
}

.related-posts .slick-slide > div,
.related-posts .slick-slide .item {
    height: 100%;
}

.related-posts article.post {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.related-posts article.post .inner-bottom {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.related-posts article.post .description {
    flex: 1 1 auto;
}


/* ======================================================================
   55) POKLICI: FAQ ČEZ CELO ŠIRINO IN NOVI ZNAKI ZA ODPIRANJE
   ----------------------------------------------------------------------
   Miha: »uredi te pluske ikonce na FAQ sektorju spodaj in content
   razpotegni, da bo enake širine kot zgornji navodilo box«.

   ⚠ Odsek je imel `max-width: 860px`, škatla z navodilom nad njim pa je
   široka 1290. Zato je FAQ izpadel kot druga, ožja stran.

   Znak za odpiranje je bil znak »+« iz pisave v 28 px krogcu — tanek in
   na zaslonu komaj viden. Zdaj je narisan s CSS (dve prečki), krogec je
   32 px, odprto vprašanje pa dobi prelivni krogec z belo črtico.
   ====================================================================== */

.zdr-poklici-faq {
    max-width: none !important;
}

.zdr-poklici-faq__par > summary::after {
    content: "" !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background-color: var(--zi-primary-50);
    background-image:
        linear-gradient(var(--zi-primary), var(--zi-primary)),
        linear-gradient(var(--zi-primary), var(--zi-primary));
    background-size: 14px 2px, 2px 14px;
    background-position: center, center;
    background-repeat: no-repeat;
    transition: background-color .18s ease, transform .18s ease;
}

.zdr-poklici-faq__par > summary:hover::after {
    background-color: var(--zi-primary-100);
}

/* ⚠ Odprto vprašanje: samo vodoravna prečka. Navpična se skrije tako, da
   dobi višino 0 — z `content` se ne da, ker je risana s podlago. */
.zdr-poklici-faq__par[open] > summary::after {
    background-color: transparent;
    background-image:
        linear-gradient(#fff, #fff),
        var(--zi-gradient);
    background-size: 14px 2px, 100% 100%;
    background-position: center, center;
    transform: rotate(180deg);
}


/* ======================================================================
   56) PAKETI: NASLOVNI PAS IN SPODNJI CTA KOT DRUGOD
   ----------------------------------------------------------------------
   Miha: »želim, da ima header in spodaj CTA ‚potrebujete paket po meri‘
   takle kot drugod«.

   ⚠ Naslovni pas je imel temno modro in modri odsev, **ni pa imel vzorca
   pik** — tega imata pasova na straneh Ugledni delodajalci in Poklici.
   Zato je izpadel kot gola ploskev med dvema vzorčenima.

   ⚠ Spodnji CTA je bil **ploska svetlo modra** zaobljena ploskev — edini
   tak pas na portalu. Drugod (naslovnica, O nas) je to temno moder pas z
   vzorcem pik in belim gumbom, razred `.zdr-cta-pas`. Razreda na tej
   sekciji ni (postavljen je v Elementorju), zato je naslovljena po oznaki
   gradnika `c4dd207`.
   ====================================================================== */

/* ---------- naslovni pas ---------- */
body.page-id-9465 .elementor-element-7a53f1c,
body.page-id-1699 .elementor-element-7a53f1c {
    background-image:
        var(--zi-dots),
        radial-gradient(circle at 88% -40%, rgba(127, 178, 255, .28), transparent 62%),
        linear-gradient(135deg, var(--zi-navy-800), var(--zi-navy)) !important;
    background-size: 24px 24px, auto, auto !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
}

body.page-id-9465 .elementor-element-7a53f1c .elementor-heading-title,
body.page-id-1699 .elementor-element-7a53f1c .elementor-heading-title {
    font-family: var(--zi-font-head) !important;
    font-size: var(--zi-h1) !important;
    line-height: 1.12 !important;
    letter-spacing: -.015em !important;
    font-weight: 800 !important;
}

/* ---------- spodnji CTA ---------- */
body.page-id-9465 .elementor-element-c4dd207 > .elementor-container,
body.page-id-1699 .elementor-element-c4dd207 > .elementor-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--zi-radius-lg) !important;
    background-color: var(--zi-navy) !important;
    background-image:
        var(--zi-dots),
        radial-gradient(circle at 10% -20%, rgba(255, 255, 255, .10), transparent 45%) !important;
    background-size: 24px 24px, auto !important;
    background-repeat: repeat, no-repeat !important;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px) !important;
}

body.page-id-9465 .elementor-element-c4dd207 .elementor-heading-title,
body.page-id-1699 .elementor-element-c4dd207 .elementor-heading-title {
    font-family: var(--zi-font-head) !important;
    font-size: var(--zi-h2) !important;
    line-height: 1.15 !important;
    letter-spacing: -.015em !important;
    font-weight: 800 !important;
    color: #fff !important;
}

body.page-id-9465 .elementor-element-c4dd207 .elementor-widget-text-editor,
body.page-id-9465 .elementor-element-c4dd207 .elementor-widget-text-editor p,
body.page-id-1699 .elementor-element-c4dd207 .elementor-widget-text-editor,
body.page-id-1699 .elementor-element-c4dd207 .elementor-widget-text-editor p {
    color: rgba(255, 255, 255, .78) !important;
}

/* gumb je bel – tako kot na ostalih pasovih */
body.page-id-9465 .elementor-element-c4dd207 .elementor-button,
body.page-id-1699 .elementor-element-c4dd207 .elementor-button {
    min-height: 48px;
    padding: 14px 24px !important;
    border-radius: 10px !important;
    background: #fff !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--zi-primary) !important;
    font: 700 15px/1 var(--zi-font-head) !important;
    box-shadow: var(--zi-shadow-3);
}


/* ======================================================================
   57) STRAN BOOST PO NOVEM DIZAJNU
   ----------------------------------------------------------------------
   Miha je predal nov dizajn strani /boost-oglas/ z opombo: »ikone in to
   ne menjaj, daj iz portala, ne teh kvadratov«. V dizajnu so ikone
   družbenih omrežij narisane kot nadomestni kvadratki — na strani so že
   pravi znaki, zato se jih ne dotikamo.

   Ogrodje (nadnapisi, prelivni repi, dva stolpca, temna ploskev) doda
   `zdr_podoba_boost()` v `inc/podoba-2026.php`; tu je videz.
   ====================================================================== */

/* ---------- »Kaj je BOOST« v dva stolpca ---------- */
.zdr-boost-nakratko {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-bottom: 48px;
}

.zdr-boost-nakratko__besedilo h2 {
    margin-top: 0;
}

.zdr-boost-nakratko .zdr-boost-kanali {
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
}

@media (max-width: 991px) {
    .zdr-boost-nakratko {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ---------- temna ploskev: razlog + postopek ---------- */
/* ⚠ Ploskev sega čez celo širino zaslona, vsebina pa ostane v stolpcu.
   Narejeno s `box-shadow` in `clip-path`, **ne** s `100vw` — ta na
   Windowsu šteje tudi drsnik in stran bi se dala potegniti vstran. */
.zdr-boost-temno {
    position: relative;
    margin: 56px 0;
    padding: 56px 0 48px;
    background-color: var(--zi-navy);
    background-image:
        var(--zi-dots),
        radial-gradient(circle at 8% 110%, rgba(31, 191, 176, .20), transparent 55%),
        radial-gradient(circle at 88% -30%, rgba(127, 178, 255, .22), transparent 60%);
    background-size: 24px 24px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
    box-shadow: 0 0 0 100vmax var(--zi-navy);
    clip-path: inset(0 -100vmax);
}

.zdr-boost-temno h2 {
    color: #fff;
}

.zdr-boost-temno p,
.zdr-boost-temno .zdr-boost-koraki li span {
    color: rgba(255, 255, 255, .78);
}

/* v temnem odseku je razlog v dveh stolpcih: naslov levo, besedilo desno */
.zdr-boost-temno__vsebina > .zdr-nadnapis + h2 + p {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .zdr-boost-temno__vsebina {
        display: grid;
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
        column-gap: 48px;
        align-items: start;
    }

    /* ⚠ Verižica je tudi <p>. Brez izločitve jo je pravilo za odstavek
       postavilo v prvo vrstico, čez besedilo razloga. */
    .zdr-boost-temno__vsebina > .zdr-nadnapis { grid-column: 1; grid-row: 1; }
    .zdr-boost-temno__vsebina > h2 { grid-column: 1; grid-row: 2; margin-top: 0; }
    .zdr-boost-temno__vsebina > p:not([class]) { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; }
    .zdr-boost-temno__vsebina > .zdr-boost-panel { grid-column: 1 / -1; grid-row: 3; }
    .zdr-boost-temno__vsebina > .zdr-boost-logika { grid-column: 1 / -1; grid-row: 4; }
}

/* panel v temnem odseku nima svoje svetle ploskve */
.zdr-boost-temno .zdr-boost-panel {
    margin: 40px 0 0;
    padding: 0;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 36px;
}

/* koraki: štirje v vrsti, peti čez celo širino – tako kot v dizajnu */
.zdr-boost-temno .zdr-boost-koraki {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zdr-boost-temno .zdr-boost-koraki li:nth-child(5) {
    grid-column: 1 / -1;
}

.zdr-boost-temno .zdr-boost-koraki li {
    border-color: transparent;
    box-shadow: var(--zi-shadow-1);
}

.zdr-boost-temno .zdr-boost-koraki li strong {
    color: var(--zi-gray-900);
}

.zdr-boost-temno .zdr-boost-koraki li span {
    color: var(--zi-text-muted);
}

/* verižica v temnem odseku */
.zdr-boost-temno .zdr-boost-logika {
    margin: 36px 0 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 1199px) {
    .zdr-boost-temno .zdr-boost-koraki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .zdr-boost-temno { padding: 40px 0 36px; }
    .zdr-boost-temno .zdr-boost-koraki { grid-template-columns: 1fr; }
}

/* ---------- kdaj se splača: pet v vrsti ---------- */
.zdr-boost-primeri {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* ---------- poudarek kot kartica ---------- */
.zdr-boost-poudarek {
    max-width: none;
    padding: 24px 28px;
    border-left: 4px solid var(--zi-accent);
    border-radius: var(--zi-radius-md);
    background: var(--zi-surface);
    box-shadow: var(--zi-shadow-1);
    font-family: var(--zi-font-head);
    font-size: 20px;
}


/* ⚠ Naslovi na tej strani imajo iz prejšnje različice modro črtico
   (h2 s pseudo-elementom ::before). Zdaj nad njimi stoji pravi nadnapis s svojo črtico —
   dve zapored sta bili videti kot napaka. */
.zdr-boost-nakratko h2::before,
.zdr-boost-temno h2::before,
.zdr-nadnapis + h2::before {
    display: none !important;
    content: none !important;
}

/* ⚠ Besedilo v temnem odseku je ostalo temno sivo: stran ima svoje
   pravilo `body.page-id-10737 .site-main p`, ki je natančnejše od
   `.zdr-boost-temno p`. Zato je tu `body` na začetku in `!important`. */
body .zdr-boost-temno p:not([class]),
body .zdr-boost-temno .zdr-boost-vodilo,
body.page-id-10737 .site-main .zdr-boost-temno p:not([class]),
body.page-id-10738 .site-main .zdr-boost-temno p:not([class]) {
    color: rgba(255, 255, 255, .80) !important;
}

body .zdr-boost-temno a:not(.zdr-objava-gumb) {
    color: #fff !important;
    text-decoration-color: rgba(255, 255, 255, .5);
}

/* razmik med razlogom in postopkom naj bo enak kot drugod */
.zdr-boost-temno__vsebina > .zdr-boost-panel {
    margin-top: 8px;
}


/* ======================================================================
   58) STRAN O PORTALU PO NOVEM DIZAJNU
   ----------------------------------------------------------------------
   Ogrodje (dva stolpca, pas »Poslanstvo«, gumba, prelivni repi) doda
   `zdr_podoba_oportalu()` v `inc/podoba-2026.php`; tu je videz.

   ⚠ Naslovni pas in pas s števili sta bila **svetlo modra z velikim
   krogom** — edina taka ploskev na portalu. Dizajn ju postavi na isto
   temno modro z vzorcem pik kot vse ostale pasove.
   ====================================================================== */

/* ---------- naslovni pas ---------- */
body.page-id-9148 .zdr-onas-hero,
body.page-id-40 .zdr-onas-hero {
    background-color: var(--zi-navy) !important;
    background-image:
        var(--zi-dots),
        radial-gradient(circle at 8% 110%, rgba(31, 191, 176, .20), transparent 55%),
        radial-gradient(circle at 88% -30%, rgba(127, 178, 255, .22), transparent 60%),
        linear-gradient(135deg, var(--zi-navy-800), var(--zi-navy)) !important;
    background-size: 24px 24px, auto, auto, auto !important;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
}

/* ⚠ Tema je krog risala s psevdoelementom; brez tega ostane čista ploskev. */
body.page-id-9148 .zdr-onas-hero::before,
body.page-id-40 .zdr-onas-hero::before,
body.page-id-9148 .zdr-onas-hero::after,
body.page-id-40 .zdr-onas-hero::after {
    display: none !important;
    content: none !important;
}

body.page-id-9148 .zdr-onas-hero .elementor-widget-text-editor h1::before,
body.page-id-40 .zdr-onas-hero .elementor-widget-text-editor h1::before {
    /* crtica je narisana s podlago, ker psevdoelement ne more imeti
       svojega otroka — tako nadnapis stoji v svoji vrstici, kot drugod */
    display: block;
    padding-left: 34px;
    background: linear-gradient(var(--zi-accent), var(--zi-accent)) left center / 24px 2px no-repeat;
    font-family: var(--zi-font-head);
    font-size: var(--zi-eyebrow);
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--zi-accent);
    margin-bottom: 14px;
}

body.page-id-9148 .zdr-onas-hero .elementor-widget-text-editor h1,
body.page-id-40 .zdr-onas-hero .elementor-widget-text-editor h1 {
    font-size: var(--zi-h1) !important;
    line-height: 1.12 !important;
}

/* ---------- pas s števili ---------- */
body.page-id-9148 .elementor-element-d1d543b,
body.page-id-40 .elementor-element-83b1daa {
    background-color: var(--zi-navy) !important;
    background-image: var(--zi-dots) !important;
    background-size: 24px 24px !important;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

body.page-id-9148 .elementor-element-d1d543b .elementor-counter-number-wrapper,
body.page-id-40 .elementor-element-83b1daa .elementor-counter-number-wrapper {
    color: #6EC7F5 !important;
}

body.page-id-9148 .elementor-element-d1d543b .elementor-counter-title,
body.page-id-40 .elementor-element-83b1daa .elementor-counter-title {
    color: rgba(255, 255, 255, .72) !important;
}

/* ---------- telo v dveh stolpcih ---------- */
.zdr-oportalu-telo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    margin: 8px 0 0;
}

.zdr-oportalu-telo__besedilo p {
    margin: 0 0 18px;
}

.zdr-oportalu-telo__prednosti h2 {
    margin: 0 0 22px;
    font-family: var(--zi-font-head);
    font-size: var(--zi-h2);
    line-height: 1.15;
    letter-spacing: -.015em;
    font-weight: 800;
    color: var(--zi-gray-900);
}

.zdr-oportalu-tocke {
    display: grid;
    gap: 12px;
}

/* postavka: bela kartica s turkizno letvijo in kljukico */
.zdr-oportalu-tocka {
    position: relative;
    margin: 0 !important;
    padding: 16px 20px 16px 56px;
    border: 1px solid var(--zi-gray-200);
    border-left: 3px solid var(--zi-accent);
    border-radius: var(--zi-radius-md);
    background: var(--zi-surface);
    box-shadow: var(--zi-shadow-1);
    font-size: 15px;
    line-height: 1.5;
    color: var(--zi-text-muted);
}

.zdr-oportalu-tocka strong {
    color: var(--zi-gray-900);
}

.zdr-oportalu-tocka::before {
    content: "\2713";
    position: absolute;
    top: 16px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--zi-accent-50);
    color: var(--zi-accent-700, #0B6E66);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 991px) {
    .zdr-oportalu-telo {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ---------- pas »Poslanstvo« ---------- */
/* ⚠ Ploskev sega čez celo širino zaslona brez `100vw` — ta na Windowsu
   šteje tudi drsnik in stran bi se dala potegniti vstran. */
.zdr-oportalu-poslanstvo {
    position: relative;
    margin: 64px 0 56px;
    padding: 56px 0 48px;
    background-color: var(--zi-navy);
    background-image:
        var(--zi-dots),
        radial-gradient(circle at 8% 110%, rgba(31, 191, 176, .18), transparent 55%),
        radial-gradient(circle at 88% -30%, rgba(127, 178, 255, .20), transparent 60%);
    background-size: 24px 24px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
    box-shadow: 0 0 0 100vmax var(--zi-navy);
    clip-path: inset(0 -100vmax);
}

@media (min-width: 992px) {
    .zdr-oportalu-poslanstvo__vsebina {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 56px;
        align-items: start;
    }

    .zdr-oportalu-poslanstvo__vsebina > .zdr-nadnapis { grid-column: 1; grid-row: 1; }
    .zdr-oportalu-poslanstvo__vsebina > h2 { grid-column: 1; grid-row: 2; }
    .zdr-oportalu-poslanstvo__besedilo { grid-column: 2; grid-row: 1 / span 2; }
    .zdr-oportalu-poslanstvo__zakljucek { grid-column: 1 / -1; grid-row: 3; }
}

.zdr-oportalu-poslanstvo h2 {
    margin: 0 0 8px;
    font-family: var(--zi-font-head);
    font-size: var(--zi-h2);
    line-height: 1.15;
    letter-spacing: -.015em;
    font-weight: 800;
    color: #fff;
}

body .zdr-oportalu-poslanstvo p,
body.page-id-9148 .site-main .zdr-oportalu-poslanstvo p,
body.page-id-40 .site-main .zdr-oportalu-poslanstvo p {
    color: rgba(255, 255, 255, .80) !important;
}

.zdr-oportalu-poslanstvo strong {
    color: #fff;
}

.zdr-oportalu-poslanstvo__zakljucek {
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.zdr-oportalu-poslanstvo__zakljucek h3 {
    margin: 0 0 24px;
    font-family: var(--zi-font-head);
    font-size: clamp(22px, 18px + 1vw, 30px);
    line-height: 1.25;
    letter-spacing: -.01em;
    font-weight: 800;
    color: #fff;
}

/* ---------- gumba pod zaključkom ---------- */
.zdr-oportalu-gumbi {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.zdr-oportalu-gumb {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 24px;
    border-radius: 10px;
    font: 700 15px/1 var(--zi-font-head);
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.zdr-oportalu-gumb--bel {
    background: #fff;
    color: var(--zi-primary) !important;
    box-shadow: var(--zi-shadow-3);
}

.zdr-oportalu-gumb--obroba {
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff !important;
}

.zdr-oportalu-gumb:hover {
    transform: translateY(-1px);
}

.zdr-oportalu-gumb--obroba:hover {
    border-color: rgba(255, 255, 255, .6);
}

/* ⚠ Dizajn kaze pas s paketi na tej strani kot BELO kartico s prelivnim
   robom. Pustil sem ga temno modrega — tak je isti pas na naslovnici in
   na strani Paketi, tri razlicice istega pasu pa bi bile korak nazaj.
   Ce Miha zeli natanko po dizajnu, se tu doda bela razlicica. */


/* ======================================================================
   59) BOOST: VSI TEMNI PASOVI PO ISTEM KOPITU
   ----------------------------------------------------------------------
   Miha: »na Boostu niso sliderji oz. modri bari v ozadju — tako mora
   biti; vsi sektorji na Boostu naj bodo poenoteni. Tudi nekateri gumbi
   niso posodobljeni po grafiki«.

   Izmerjeno: srednji pas (`.zdr-boost-temno`) je imel **vzorec pik in
   turkizni odsev**, naslovni pas (`.zdr-objava-pas`) in zaključni pas
   (`.zdr-objava-cta`) pa samo temno modro s prelivom — ista stran, tri
   različne ploskve.

   Gumbi v zaključnem pasu so imeli radij **6 px** namesto 10, pisavo
   Source Sans namesto Manrope, beli gumb pa temnejšo modro `#0E4F94`
   namesto naše `--zi-primary`.

   Nadnapis »Za delodajalce« je bil Source Sans v svetlo modri `#9DC4FF`,
   nadnapisi v srednjem pasu pa Manrope v turkizni — zdaj so vsi enaki.

   ⚠ Oba razreda sta tudi na strani »Objavite zaposlitveni oglas«, zato
   se popravek pozna tudi tam — kar je prav, saj gre za isti komplet.
   ====================================================================== */

.zdr-objava-pas,
.zdr-objava-cta {
    background-color: var(--zi-navy) !important;
    background-image:
        var(--zi-dots),
        radial-gradient(circle at 8% 110%, rgba(31, 191, 176, .20), transparent 55%),
        radial-gradient(circle at 88% -30%, rgba(127, 178, 255, .22), transparent 60%),
        linear-gradient(135deg, var(--zi-navy-800), var(--zi-navy)) !important;
    background-size: 24px 24px, auto, auto, auto !important;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
}

/* ---------- nadnapis v pasovih ---------- */
.zdr-objava-oznaka {
    font-family: var(--zi-font-head) !important;
    font-size: var(--zi-eyebrow) !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: var(--zi-accent) !important;
}

/* ---------- gumba v zaključnem pasu ---------- */
.zdr-objava-gumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 24px !important;
    border-radius: 10px !important;
    font: 700 15px/1 var(--zi-font-head) !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.zdr-objava-gumb--bel {
    background: #fff !important;
    color: var(--zi-primary) !important;
    border: 0 !important;
    box-shadow: var(--zi-shadow-3);
}

.zdr-objava-gumb--obroba {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: #fff !important;
}

.zdr-objava-gumb:hover {
    transform: translateY(-1px);
}

.zdr-objava-gumb--obroba:hover {
    border-color: rgba(255, 255, 255, .6) !important;
}


/* ======================================================================
   60) KONTAKT: PAS »ŽELITE OBJAVITI OGLAS?« KOT VSI OSTALI
   ----------------------------------------------------------------------
   Miha: »na strani Kontakt je samo tale box za zamenjati ozadje, in gumb
   poglej, če je v skladu s CGP«.

   ⚠ Ploskev je bila **ploski modri preliv** `linear-gradient(135deg,
   #0E4F94, #1D6FE8)` — edini tak pas na portalu. Vsi ostali (naslovnica,
   O portalu, Paketi, Boost, Objavite oglas) so temno modri z vzorcem pik.

   ⚠ Gumb je bil blizu, a ne isti: radij 12 namesto 10, pisava 14.5 px
   namesto 15, na angleški strani pa je bil napis v temnejši modri
   `#0E4F94` namesto naše `--zi-primary`.

   ⚠ Oznaki gradnika se med jezikoma razlikujeta (SL `09283dd`, EN
   `c69a999`), zato sta našteti obe.
   ====================================================================== */

body.page-id-9457 .elementor-element-09283dd > .elementor-container,
body.page-id-57 .elementor-element-c69a999 > .elementor-container,
body .elementor-element-09283dd > .elementor-container,
body .elementor-element-c69a999 > .elementor-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--zi-radius-lg) !important;
    background-color: var(--zi-navy) !important;
    background-image:
        var(--zi-dots),
        radial-gradient(circle at 8% 110%, rgba(31, 191, 176, .18), transparent 55%),
        radial-gradient(circle at 88% -30%, rgba(127, 178, 255, .20), transparent 60%) !important;
    background-size: 24px 24px, auto, auto !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
}

body .elementor-element-09283dd .elementor-heading-title,
body .elementor-element-c69a999 .elementor-heading-title {
    font-family: var(--zi-font-head) !important;
    font-size: var(--zi-h2) !important;
    line-height: 1.15 !important;
    letter-spacing: -.015em !important;
    font-weight: 800 !important;
    color: #fff !important;
}

body .elementor-element-09283dd .elementor-widget-text-editor,
body .elementor-element-09283dd .elementor-widget-text-editor p,
body .elementor-element-c69a999 .elementor-widget-text-editor,
body .elementor-element-c69a999 .elementor-widget-text-editor p {
    color: rgba(255, 255, 255, .78) !important;
}

body .elementor-element-09283dd .elementor-button,
body .elementor-element-c69a999 .elementor-button {
    min-height: 48px;
    padding: 14px 24px !important;
    border-radius: 10px !important;
    background: #fff !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--zi-primary) !important;
    font: 700 15px/1 var(--zi-font-head) !important;
    text-transform: none !important;
    box-shadow: var(--zi-shadow-3);
    transition: transform .2s ease;
}

body .elementor-element-09283dd .elementor-button:hover,
body .elementor-element-c69a999 .elementor-button:hover {
    transform: translateY(-1px);
    color: var(--zi-primary) !important;
}


/* ======================================================================
   61) TEMNI PASOVI: VZOREC ČEZ CELO ŠIRINO
   ----------------------------------------------------------------------
   Miha: »pikice / slika čez celo, ne samo po sredini«.

   ⚠ Prej je bila ploskev razširjena z `box-shadow: 0 0 0 100vmax`. Senca
   zna narisati samo **enobarvno** ploskev, zato so bile pike in odsev
   le v širini vsebine, ob robovih pa gola temno modra.

   Zdaj vzorec nosi `::before`, ki sega 100vmax levo in desno; starš ga
   obreže s `clip-path`, da stran kljub temu ne dobi drsnika vstran.
   ⚠ `100vw` tu ne pride v poštev — na Windowsu šteje tudi drsnik.
   ====================================================================== */

/* ⚠⚠ Sam clip-path prelivanja ne prepreci — Chrome absolutno postavljeni
   otrok se vedno steje v sirino dokumenta. Zato dobita strani, ki tak pas
   uporabljata, se `overflow-x: clip` (ne `hidden`, ker ta pokvari lepljivo
   glavo). */
body.page-id-10737,
body.page-id-10738,
body.page-id-9148,
body.page-id-40,
body.page-id-10178 {
    overflow-x: clip;
}

.zdr-boost-temno,
.zdr-oportalu-poslanstvo {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    /* ⚠ Obrez iz blokov 57 in 58 je bil prav tako v `vmax` in ni več
       potreben — pas je odslej natanko širok kot zaslon. */
    clip-path: none !important;
    isolation: isolate;
}

/* ⚠⚠ Prej je ta pas segal `-100vmax` levo in desno. Na namizju je `vmax`
   širina zaslona in vse je bilo videti prav, na **pokončnem telefonu pa je
   vmax VIŠINA** — 900 px namesto 390. Pas je bil zato širok 2190 px,
   dokument 1255 px, in Android Chrome je celo stran pomanjšal na tretjino
   zaslona (Mihova slika z O portala, 18. 9.).
   Odslej je pas natanko širok kot zaslon in sredinjen na isto os kot
   vsebina — prekoračenja ni več ne na telefonu ne na namizju. */
.zdr-boost-temno::before,
.zdr-oportalu-poslanstvo::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 100vw;
    margin-left: -50vw;
    z-index: -1;
    background-color: var(--zi-navy);
    background-image:
        var(--zi-dots),
        radial-gradient(circle at 8% 110%, rgba(31, 191, 176, .18), transparent 40%),
        radial-gradient(circle at 92% -30%, rgba(127, 178, 255, .20), transparent 45%);
    background-size: 24px 24px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
}


/* ======================================================================
   62) O PORTALU: ŠIRINA TELESA IN RITEM SPODNJIH DVEH ŠKATEL
   ----------------------------------------------------------------------
   Miha: »sektor Prednosti izgleda razmetano in neusklajeno« ter »2× boxa
   sta, poenoti ali prerazporedi, spacing dol naj bo enak kot gor«.

   ⚠⚠ Telo strani je imelo v Elementorju `max-width: 900px`. Dva stolpca
   sta zato merila po 422 px — od tod vtis razmetanosti: besedilo se je
   lomilo na vsake štiri besede, kartice prednosti pa so bile ožje od
   svojega besedila. Vsebnik je zdaj širok kot na ostalih straneh.

   ⚠ Škatli pod tem sta bili **različno široki** (paketi 1320, iskalnik
   1290) in z neenakimi razmiki (107 / 73 / 76 px). Zdaj sta obe 1290 in
   razmiki so 72 px gor, med njima in dol.
   ====================================================================== */

body.page-id-9148 .elementor-element-f4dc3d8,
body.page-id-40 .elementor-element-f4dc3d8 {
    max-width: none !important;
}

/* razmerje stolpcev: pripoved levo, prednosti desno – desni ima več vsebine */
@media (min-width: 992px) {
    .zdr-oportalu-telo {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 64px;
    }
}

/* ---------- škatla s paketi ---------- */
body.page-id-9148 .elementor-element-c7487cc,
body.page-id-40 .elementor-element-7e81a774 {
    /* ⚠⚠ Elementor tej sekciji vsili raztegnitev prek CELE strani z
       vgrajenim slogom `width: 1440px; left: -75px`. Brez razveljavitve
       kartica stoji ob levem robu zaslona, ne v stolpcu vsebine. */
    position: relative;
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    max-width: 1290px !important;
    margin-top: 72px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* ⚠⚠ Vidna temna kartica NI ta sekcija, ampak NOTRANJA (SL 5dea35c7,
   EN 609bde0a) — na njej je razred .zdr-cta-pas. Zunanja je samo ovoj,
   zato je treba na sirino potegniti notranjo. */
body.page-id-9148 .elementor-element-5dea35c7,
body.page-id-40 .elementor-element-609bde0a {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    left: 0 !important;
}

body.page-id-9148 .elementor-element-5dea35c7 > .elementor-container,
body.page-id-40 .elementor-element-609bde0a > .elementor-container {
    max-width: none !important;
    width: 100% !important;
}

/* ⚠ Stolpec in ovoj gradnika imata svojo oblogo 15 px; brez nje kartica
   res stoji od roba do roba stolpca vsebine. */
body.page-id-9148 .elementor-element-c7487cc > .elementor-container > .elementor-column,
body.page-id-9148 .elementor-element-c7487cc > .elementor-container > .elementor-column > .elementor-widget-wrap,
body.page-id-40 .elementor-element-7e81a774 > .elementor-container > .elementor-column,
body.page-id-40 .elementor-element-7e81a774 > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding: 0 !important;
}

body.page-id-9148 .elementor-element-c7487cc > .elementor-container,
body.page-id-40 .elementor-element-7e81a774 > .elementor-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ---------- škatla z iskalnikom ---------- */
body.page-id-9148 .zdr-iskalnik-onas,
body.page-id-40 .zdr-iskalnik-onas {
    padding: 0 !important;
}

body.page-id-9148 .zdr-iskalnik-onas .container,
body.page-id-40 .zdr-iskalnik-onas .container {
    margin-top: 72px !important;
    margin-bottom: 0 !important;
}

/* ⚠ Pod iskalnikom je odsek »Zaupajo nam« s svojo zgornjo oblogo 72 px —
   tako je razmik pod zadnjo škatlo enak razmikoma nad njo in med njima. */


/* ======================================================================
   63) GLAVA, KO JE DELODAJALEC VPISAN
   ----------------------------------------------------------------------
   Miha: »zgoraj meni se profil delodajalca prekrije z objavi oglas,
   torej raztegni meni, ko je nekdo vpisan«.

   Izmerjeno na vpisani seji: gumb »Objavi oglas« sega do 1802 px, znak
   podjetja se začne pri 1745 — **57 px prekritja**, pri vsaki širini
   zaslona enako.

   ⚠ Vzroka sta dva hkrati:
   1) Vrstica glave je od 16. 9. široka 1320 px, da stoji na isti
      navpičnici kot vsebina. Vpisanemu se vanjo stlači še znak podjetja
      (254 px) — vsebina potrebuje 1439 px.
   2) Gradnik z imenom podjetja je **širši od svojega vsebnika** (254 proti
      90 px) in po sredini poravnan, zato se je razlika razlila na obe
      strani in polovica znaka je legla čez gumb. Vsebnik se skrči zato,
      ker ima vsebnik menija v Elementorju širino 250 % — pri deljenju
      manjkajočega prostora ves primanjkljaj poberejo sosedje, ne meni.

   Popravek: vpisanemu se vrstica razširi do 1600 px, postavke menija so
   za spoznanje tesnejše, znak podjetja pa se odslej krči znotraj svojega
   vsebnika. Kar ostane premalo, poje ime podjetja s tropičjem — nikoli
   več sosednji gumb.
   ====================================================================== */

body.logged-in #apus-header .elementor-element-82fe2a5 {
    max-width: 1600px !important;
}

body.logged-in #apus-header #primary-menu > li:not(.zdr-meni-gumb--polni) > a {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* znak podjetja ostane znotraj svojega vsebnika */
#apus-header .elementor-element-941551f > .elementor-widget,
#apus-header .top-wrapper-menu,
#apus-header .top-wrapper-menu > a.drop-dow,
#apus-header .top-wrapper-menu .infor-account {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ⚠ `pull-right` je plavajoč; v vsebniku brez širine se zato ne šteje */
#apus-header .top-wrapper-menu.pull-right {
    float: none !important;
}

#apus-header .elementor-element-941551f > .elementor-widget > .elementor-widget-container {
    text-align: right !important;
}

/* ⚠ Stopnice `max-width` po širinah zaslona (koraki 189/239) so bile
   izmerjene za manjši logotip; zdaj se ime krči samo takrat, ko je
   prostora res premalo, zato jih tu izklopimo. */
#apus-header .top-wrapper-menu .name-acount {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
}


/* ======================================================================
   64) STRANSKA VRSTICA DELODAJALCA: ENAK ZRAK NA VSEH ŠTIRIH STRANEH
   ----------------------------------------------------------------------
   Miha: »uredi estetsko sidebar spacing gor dol levo desno«.

   ⚠⚠ Kartica profila ni imela obloge sploh — tema jo odvzame z
      `.inner-dashboard .widget_apus_user_short_profile { padding: 0
      !important }`. Izmerjeno: znak podjetja se je dotikal levega roba
      kartice, »Odjava« pa je bila 2 px nad spodnjim. Obloga se zato
      vrne prav tako z `!important`.

   ⚠ Škatla »Potrebujete pomoč?« ni gradnik, ampak izpis ob vrstici, in
     je bila 12 px ožja od kartice nad sabo. Zdaj sta poravnani.
   ====================================================================== */

body .inner-dashboard .sidebar-left .widget_apus_user_short_profile {
    padding: 20px !important;
}

/* glava kartice: znak, ime, kraj, gumb */
.inner-dashboard .user-short-profile-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 16px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--zi-gray-200);
}

/* ⚠ Vodilo `.clearfix` iz Bootstrapa nariše ::before in ::after; v flex
   vrsti sta postala prazna elementa in znak podjetja je dobil 14 px
   zamika, ki ga nihče ni zapisal. */
.inner-dashboard .user-short-profile-top::before,
.inner-dashboard .user-short-profile-top::after {
    display: none !important;
}

.inner-dashboard .user-short-profile-top .user-logo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-md);
    background: var(--zi-surface);
}

/* ⚠ Slika prihaja v velikosti 150 × 150 px in je dvakrat ušla meri:
   v mreži je `max-width: 100 %` merila samo sebe (proga se razteza po
   vsebini) in znak je ostal 90 px, v flexu z `min-width: 0` pa se je
   skrčil na 12 px. Zato je meja zapisana v pikslih — 56 px ploščice
   manj 2 × 6 px obloge. */
/* ⚠ Med ploščico in sliko sta še dva ovoja teme (`.employer-logo` in
   `.image-wrapper`). Prvi ima svojo višino 90 px in desni odmik 30 px —
   v flex vrsti se je skrčil na 12 px, sliko pa je nosil ob strani. */
.inner-dashboard .user-short-profile-top .user-logo .employer-logo,
.inner-dashboard .user-short-profile-top .user-logo .employer-logo > a,
.inner-dashboard .user-short-profile-top .user-logo .image-wrapper {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    background: none;
}

.inner-dashboard .user-short-profile-top .user-logo img {
    flex: none;
    width: auto !important;
    height: auto !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain;
}

.inner-dashboard .user-short-profile-top .inner {
    min-width: 0;
}

.inner-dashboard .user-short-profile-top .title {
    margin: 0 0 2px;
    font-family: var(--zi-font-head);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.01em;
}

.inner-dashboard .user-short-profile-top .title a {
    color: var(--zi-gray-900);
}

.inner-dashboard .user-short-profile-top .location,
.inner-dashboard .user-short-profile-top .address {
    font-size: 13px;
    line-height: 1.4;
    color: var(--zi-gray-500);
}

.inner-dashboard .user-short-profile-top .view-profile {
    margin-top: 12px;
}

.inner-dashboard .user-short-profile-top .view-profile .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--zi-radius-sm);
    background: var(--zi-gumb-preliv, var(--zi-gradient)) !important;
    color: #fff !important;
    font: 700 13.5px/1 var(--zi-font-head);
    text-transform: none;
}

/* postavke menija: enak zrak levo in desno kot ga ima kartica */
.inner-dashboard .user_short_profile,
.inner-dashboard .user_short_profile .navbar-collapse {
    padding: 0 !important;
}

.inner-dashboard .menu_short_profile li {
    margin-bottom: 2px;
}

.inner-dashboard .menu_short_profile li:last-child {
    margin-bottom: 0;
}

.inner-dashboard .menu_short_profile li > a {
    padding: 10px 12px !important;
    border-radius: var(--zi-radius-sm);
    font-family: var(--zi-font-head);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--zi-gray-700);
}

.inner-dashboard .menu_short_profile li > a:hover,
.inner-dashboard .menu_short_profile li.active > a,
.inner-dashboard .menu_short_profile li.current-menu-item > a {
    background: var(--zi-primary-50);
    color: var(--zi-primary);
}

/* škatla s pomočjo: ista kartica kot zgoraj, poravnana z njo */
.sidebar-left .zdr-pomoc {
    margin: 18px 0 0 !important;
    padding: 20px !important;
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-lg);
    background: var(--zi-surface);
    box-shadow: var(--zi-shadow-1);
}


/* ======================================================================
   65) HITRE POTI: IKONA ZA »SPREMENI GESLO«
   ----------------------------------------------------------------------
   Miha: »ikona na hitrih poteh v spremeni geslo daj nek kolešček ali
   nekaj«.

   ⚠ Razred `flaticon-padlock` v pisavi teme NE obstaja — izmerjeno je
   znak 0 × 0 px in `content: none`, zato je bil na plošči prazen
   kvadratek. Ključavnica se imenuje `flaticon-password` in je ista kot
   ob »Spremeni geslo« v levem meniju. Zamenjava je v
   `template-jobs/misc/employer-dashboard.php`; tu je samo varovalka,
   če bi razred kdaj spet zašel v predlogo.
   ====================================================================== */

.zdr-hitre-poti .zdr-pot__ikona i.flaticon-padlock::before {
    content: "\f122";
    font-family: Flaticon;
}


/* ======================================================================
   66) STRAN »OGLASI IN PAKETI«
   ----------------------------------------------------------------------
   Miha: »poenostavi tale pogled, preveč je; Moji oglasi ven, ker je itak
   pod Upravljanje oglasov; zgoraj Enka lepše oblikuj«.

   Naslov »Moji oglasi« odstrani `zdr_podoba_brez_dvojnega_naslova()` v
   `inc/podoba-2026.php`; naslov vtičnika »Upravljanje oglasov« zdaj nosi
   ta razdelek sam in je zato enak ostalim naslovom na strani.

   ⚠ Kartica paketa je bila široka **čez vso vsebino** (izmerjeno 2065 px
   pri zaslonu 2560) — ena sama vrstica besedila in šestpiksleni trak čez
   dva metra zaslona. Odslej so paketi kartice v mreži kot povsod na
   portalu.

   ⚠ Gumb »Objavi oglas« je bil videti bled, ker je izgubil ploskev:
   izmerjeno `background-color: transparent` in `background-image: none`,
   torej bel napis na skoraj beli strani. Dobi naš prelivni gumb.
   ====================================================================== */

/* ---------- ritem razdelkov ---------- */
body.page-id-9856 .elementor-widget-heading h2,
body.page-id-9857 .elementor-widget-heading h2 {
    margin-top: 8px;
}

/* Naslov vtičnika nad seznamom oglasov je zdaj naslov razdelka, zato je
   enak ostalim na strani — na nadzorni plošči so ti 22 px, ne 24. */
body.page-id-9856 .my-job-employer > .widget-title,
body.page-id-9857 .my-job-employer > .widget-title {
    margin: 0 0 6px;
    font-family: var(--zi-font-head);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--zi-navy-800);
}

/* ⚠ Ovoj seznama oglasov ima 60 px obloge, čeprav nima ne ploskve ne
   obrobe — razmik do naslova je bil zato 110 px, drugod na strani pa
   dobrih 70. */
body.page-id-9856 .my-job-employer,
body.page-id-9857 .my-job-employer {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
}

/* ---------- paketi kot kartice ---------- */
.zdr-paketi-seznam {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1000px;
}

.zdr-paket-vrstica {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 !important;
    padding: 20px !important;
    border: 1px solid var(--zi-gray-200) !important;
    border-left-width: 3px !important;
    border-radius: var(--zi-radius-lg) !important;
    background: var(--zi-surface);
    box-shadow: var(--zi-shadow-1);
}

.zdr-paket-vrstica__glava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.zdr-paket-vrstica__glava h4 {
    margin: 0;
    font-family: var(--zi-font-head);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--zi-gray-900);
}

.zdr-paket-vrstica__stanje {
    flex: none;
    padding: 5px 10px;
    border-radius: var(--zi-radius-pill);
    font-family: var(--zi-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zdr-paket-vrstica__crta {
    height: 6px;
    margin: 0 !important;
    border-radius: var(--zi-radius-pill);
    background: var(--zi-gray-200) !important;
    overflow: hidden;
}

.zdr-paket-vrstica__crta span {
    border-radius: var(--zi-radius-pill);
}

.zdr-paket-vrstica__stevila {
    margin: -4px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--zi-text-muted);
}

.zdr-paket-vrstica__stevila strong {
    color: var(--zi-gray-900);
}

.zdr-paket-vrstica__pod {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--zi-gray-200);
    font-family: var(--zi-font-mono);
    font-size: 12.5px;
    color: var(--zi-gray-500);
}

/* ---------- podnožje razdelka: opomba, Boosti, gumb ---------- */
.zdr-paketi-opomba {
    max-width: 1000px;
    margin: 14px 0 0 !important;
    font-size: 13px;
    line-height: 1.5;
    color: var(--zi-gray-500);
}

.zdr-paketi-povezava {
    margin: 10px 0 0 !important;
}

.zdr-paketi-povezava a {
    font-family: var(--zi-font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--zi-primary);
}

body.page-id-9856 #zdr-objavi-oglas,
body.page-id-9857 #zdr-objavi-oglas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 18px 0 20px;
    padding: 14px 24px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--zi-gumb-preliv, var(--zi-gradient)) !important;
    background-image: var(--zi-gumb-preliv, var(--zi-gradient)) !important;
    color: #fff !important;
    font: 700 15px/1 var(--zi-font-head) !important;
    text-transform: none !important;
    box-shadow: var(--zi-shadow-2);
    transition: transform .2s ease, box-shadow .2s ease;
}

body.page-id-9856 #zdr-objavi-oglas:hover,
body.page-id-9857 #zdr-objavi-oglas:hover {
    transform: translateY(-1px);
    color: #fff !important;
    box-shadow: var(--zi-shadow-3);
}


/* ======================================================================
   67) STRAN »DODATNE PROMOCIJE«
   ----------------------------------------------------------------------
   Miha: »dodatne promocije lepše oblikuj, da bo bolj enostavno ui ux«.

   ⚠ Izmerjeno je bilo razmerje obrnjeno na glavo: kartica kupljenega
   Boosta je bila široka 2065 px (čez vso vsebino), kartica za nakup pa
   320 px in sama v levem kotu pod njo. Zdaj sta obe v istem stolpcu
   širine 1000 px: kupljeni Boosti v mreži kartic, nakup pa ena
   dvostolpčna kartica — levo kaj Boost je, desno cena in nakup.

   ⚠ Kartica za nakup ima otroke v zaporedju glava, obseg, cena, opomba,
   lastnosti, obrazec. Mreža jih zato razporedi po vrsticah izrecno —
   brez tega bi cena pristala pod naslovom.
   ====================================================================== */

body.page-id-9984 .zdr-boosti--stran,
body.page-id-9985 .zdr-boosti--stran,
body.page-id-9984 .zdr-boost-nakup,
body.page-id-9985 .zdr-boost-nakup {
    max-width: 1000px;
}

/* ---------- kupljene promocije ---------- */
.zdr-boosti__seznam {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.zdr-boost {
    margin: 0 !important;
    padding: 20px !important;
    border: 1px solid var(--zi-gray-200) !important;
    border-left-width: 3px !important;
    border-radius: var(--zi-radius-lg) !important;
    background: var(--zi-surface);
    box-shadow: var(--zi-shadow-1);
}

.zdr-boost__ime {
    font-family: var(--zi-font-head);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--zi-gray-900);
}

.zdr-boost__stanje {
    flex: none;
    padding: 5px 10px;
    border-radius: var(--zi-radius-pill);
    font-family: var(--zi-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zdr-boost__pod {
    font-family: var(--zi-font-mono);
    font-size: 12.5px;
    color: var(--zi-gray-500);
}

/* opomba, da Boost uredimo osebno – kot mirna obvestilna vrstica */
.zdr-boosti__opomba,
.zdr-boosti__prazno {
    max-width: 1000px;
    margin: 16px 0 0 !important;
    padding: 14px 16px;
    border-left: 3px solid var(--zi-accent);
    border-radius: var(--zi-radius-md);
    background: var(--zi-accent-50);
    font-size: 14px;
    line-height: 1.55;
    color: var(--zi-gray-700);
}

/* ---------- nakup ---------- */
.zdr-boost-nakup {
    margin-top: 40px !important;
    padding-top: 32px !important;
    border-top: 1px solid var(--zi-gray-200) !important;
}

.zdr-boost-nakup__naslov {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    color: var(--zi-gray-900) !important;
}

.zdr-boost-nakup__uvod {
    font-size: 15px !important;
    color: var(--zi-text-muted) !important;
}

.zdr-paketi--boost {
    display: block;
    max-width: 1000px;
}

@media (min-width: 768px) {

    .zdr-paket--boost {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px;
        column-gap: 40px;
        align-items: start;
        width: 100% !important;
        max-width: none !important;
        padding: 28px !important;
    }

    .zdr-paket--boost .zdr-paket__glava     { grid-column: 1; grid-row: 1; }
    .zdr-paket--boost .zdr-paket__obseg     { grid-column: 1; grid-row: 2; }
    /* seznam lastnosti v dveh stolpcih – čez 660 px je ena vrsta preveč raztegnjena */
    .zdr-paket--boost .zdr-paket__lastnosti {
        grid-column: 1;
        grid-row: 3;
        margin: 18px 0 0 !important;
        columns: 2;
        column-gap: 32px;
    }

    .zdr-paket--boost .zdr-paket__lastnosti li {
        break-inside: avoid;
    }
    .zdr-paket--boost .zdr-paket__cena      { grid-column: 2; grid-row: 1; }
    .zdr-paket--boost .zdr-paket__opomba    { grid-column: 2; grid-row: 2; }

    .zdr-paket--boost .zdr-boost-nakup__obrazec {
        grid-column: 2;
        grid-row: 3;
        margin: 18px 0 0 !important;
    }
}

.zdr-paket--boost .zdr-paket__naziv {
    font-size: 20px;
    letter-spacing: -.01em;
}

.zdr-paket--boost .zdr-paket__obseg {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--zi-text-muted);
}

/* ⚠ Gumb »Kupi« je v osnovi blok čez vso širino, zato v vrsti s poljem za
   količino ni obstal — mreža ga postavi ob polje, ne podenj. */
.zdr-paket--boost .zdr-boost-nakup__obrazec {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.zdr-paket--boost .zdr-boost-nakup__oznaka {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--zi-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zi-gray-500);
}

.zdr-paket--boost .zdr-boost-nakup__stevilo {
    width: 72px;
    height: 48px;
    padding: 0 10px;
    border: 1px solid var(--zi-gray-200);
    border-radius: var(--zi-radius-sm);
    background: var(--zi-surface);
    font-family: var(--zi-font-head);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--zi-gray-900);
}

.zdr-paket--boost .zdr-paket__gumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 14px 20px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--zi-gumb-preliv, var(--zi-gradient)) !important;
    color: #fff !important;
    font: 700 15px/1 var(--zi-font-head) !important;
    text-transform: none !important;
}


/* ======================================================================
   68) TRIJE POPRAVKI PO MIHOVEM PREGLEDU (18. 9. 2026)
   ----------------------------------------------------------------------
   a) »kaj si naredil z gumbom Paketi v headerju? mora biti nazaj kot je bil«
   b) »vse gumbe znotraj preglej in popravi, da ne bodo imeli te črne črte
      vertikalne«
   c) »vsi notificationi in quoti kot je tale zelen naredi, da bo v skladu
      s podobo, ne da bojo zeleni«
   ====================================================================== */

/* ---------- a) gumb »Paketi« nazaj, kot je bil ---------- */
/* Popravljeno v bloku 63 pri viru: pravilo za tesnejše postavke menija je
   zajelo tudi prelivni gumb »Paketi« in mu odmik zbilo z 18 na 4 px
   (širina 97 → 57). Odslej ga izpušča s `:not(.zdr-meni-gumb--polni)`.

   ⚠ Novega pravila tu namenoma NI — dokler gumba nihče ne naslovi, obvelja
   ista mera kot pri odjavljenem obiskovalcu (13 × 24 px, širina 97 px).
   Popravek z dodatnim pravilom na koncu datoteke ne bi zalegel: staro
   pravilo iz bloka 63 je zadelo tudi Pakete in bi obveljalo naprej. */


/* ---------- b) navpična temna črta ob desnem robu gumbov ---------- */
/* ⚠⚠ Preliv je umerjen na **padding-box**, risan pa čez **border-box** in
   se ponavlja. V tistem enem pikslu obrobe se zato pokaže DRUGI konec
   preliva — desno temno modra. Ni senca in ni obroba.

   ⚠⚠ Popravek za to obstaja že v bloku 22, a ga je pobrisala vsaka
   poznejša bližnjica `background: … !important`: ta razširi tudi
   `background-origin` in `background-repeat` nazaj na privzeto, prav tako
   z močjo `!important`, in ker stoji nižje v datoteki, zmaga. Zato je tu
   še enkrat — **na koncu datoteke, da ostane zadnja beseda**.

   Izmerjeno: »Ogled profila« v stranski vrstici je imel
   `background-origin: padding-box`, `background-repeat: repeat` in 1 px
   prosojne obrobe — natanko vsi trije pogoji za črto. */
.btn,
.btn-theme,
.btn-submit,
.btn-login,
.elementor-button,
.widget-submit-btn .btn-theme,
.zdr-gumb,
.zdr-gumb-oglas,
.zdr-paket__gumb,
.zdr-oportalu-gumb,
.zdr-objava-gumb,
.open-job,
button,
input[type="submit"],
#primary-menu > li > a {
    background-origin: border-box !important;
    background-repeat: no-repeat !important;
}

/* ⚠ Tema temu gumbu vsili 1 px prosojne obrobe; brez nje je rob čist
   tudi, če kdaj spet pride do bližnjice `background`. */
.inner-dashboard .user-short-profile-top .view-profile .btn {
    border: 0 !important;
}

/* ⚠ Glavna hitra pot na plošči dobi preliv iz dolgega seznama v style.css,
   ki se začne z `body ` — zato tudi tu, sicer je pravilo prešibko. */
body .zdr-hitre-poti .zdr-pot--glavni {
    background-origin: border-box !important;
    background-repeat: no-repeat !important;
    border-color: transparent !important;
}


/* ---------- c) obvestila in poudarjene navedbe v naši modri ---------- */
/* ⚠ Bleda meta (`--zi-accent-50`) na velikih ploskvah se bere kot zelena,
   čeprav je turkizna iz našega CGP. Miha jo je zavrnil dvakrat — prvič
   na registraciji, drugič na Dodatnih promocijah. Vsa obvestila gredo
   zato v modro družino; turkizna ostane tam, kjer je poteza in ne
   ploskev (letve na karticah, nadnapisi, preliv).

   ⚠ Opozorilna (jantarna) in napačna (rdeča) obvestila se ne dotaknejo —
   tam barva nosi pomen. */
.zdr-brezplacno {
    border: 1px solid var(--zi-primary-50) !important;
    border-left: 3px solid var(--zi-primary) !important;
    background: var(--zi-primary-50) !important;
}

.alert-success,
.woocommerce-message,
.woocommerce-page .woocommerce-message {
    border-color: var(--zi-primary-50) !important;
    border-left: 3px solid var(--zi-primary) !important;
    background: var(--zi-primary-50) !important;
    color: var(--zi-navy) !important;
}

.zdr-enovice-obvestilo--ok,
.zdr-enovice__odziv--ok {
    background: var(--zi-primary-50) !important;
    color: var(--zi-navy) !important;
}

.zdr-boosti__opomba,
.zdr-boosti__prazno {
    border-left-color: var(--zi-primary) !important;
    background: var(--zi-primary-50) !important;
    color: var(--zi-navy) !important;
}


/* ======================================================================
   69) SIDRI V NADZORNI PLOŠČI
   ----------------------------------------------------------------------
   ⚠ Glava je lepljiva in visoka ~136 px; brez `scroll-margin-top` bi se
   naslov razdelka po skoku skril pod njo.
   ====================================================================== */

.zdr-sidro {
    display: block;
    height: 0;
    scroll-margin-top: 150px;
}


/* ======================================================================
   70) TELEFON: ISKALNIK V HEROJU IN KRMILA VRTILJAKA
   ----------------------------------------------------------------------
   Miha s telefona: »search button na sredino, isti font, iste velikosti;
   placeholder in dropdown iste širine box« in »spodaj se kar nekaj
   elementov prekriva«.

   ⚠ Izmerjeno pri 390 px: iskalno polje 302 px, izbirnik kategorije
   310 px, gumb pa 200 px — tri različne širine in trije različni levi
   robovi (48 / 40 / 39). Pisava polja 16 px, izbirnika 15 px.
   Vzrok je bootstrapov stolpec `has-border`, ki ima na namizju navpično
   črto med polji in svoj odmik; na telefonu, ko so polja eno pod drugim,
   ta odmik nima več smisla.

   ⚠⚠ Puščici vrtiljaka sta pribiti 8 px nad dno vrtiljaka, pike pa tečejo
   v toku na istem mestu — **prekrivali sta se za 7 px**, pike so gledale
   izpod gumbov (Mihova slika). Odmik dnu ne pomaga: pri absolutno
   postavljenem elementu se `bottom` meri od **oblazinjenega** okvira,
   zato obloga premakne tudi puščici. Rešitev je zato trojna: vrtiljak
   dobi prostor spodaj, pike se postavijo na samo dno, puščici pa nad
   njih.

   ⚠ Velja samo za vrtiljake, ki pike sploh imajo (`:has`); ostali obdržijo
   dosedanjo postavitev.
   ====================================================================== */

@media (max-width: 767px) {

    /* ---------- iskalnik: vsa tri polja enako široka ---------- */
    .filter-listing-form .row {
        row-gap: 10px;
    }

    .filter-listing-form .row > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* navpična črta med polji je na telefonu brez pomena */
    .filter-listing-form .has-border {
        border: 0 !important;
    }

    .filter-listing-form .wrapper-submit {
        display: block !important;
    }

    /* ⚠ `calc(100% - 2px)` poravna gumb z obrobo polj nad njim; brez tega
       je gumb za tisti piksel obrobe širši na vsaki strani. */
    .filter-listing-form .btn-submit {
        display: flex !important;
        width: calc(100% - 2px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: center;
        justify-content: center;
        font-size: 16px !important;
    }

    .filter-listing-form .form-control,
    .filter-listing-form .select2-container .select2-selection,
    .filter-listing-form .select2-container .select2-selection__rendered,
    .filter-listing-form .select2-container .select2-selection__placeholder {
        font-size: 16px !important;
    }

    /* ---------- vrtiljak: kartica, puščici, pike — vsak svoja vrsta ---------- */
    .slick-carousel:has(.slick-dots) {
        padding-bottom: 89px !important;
    }

    .slick-carousel:has(.slick-dots) .slick-arrow {
        top: auto !important;
        bottom: 29px !important;
    }

    .slick-carousel:has(.slick-dots) .slick-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 !important;
    }
}


/* ======================================================================
   71) TELEFON: HEROJ NA NASLOVNICI NA ISTI NAVPIČNICI
   ----------------------------------------------------------------------
   Miha: »search bar box na frontpage je na levi strani ožji kot zgornji
   box 'Želite objaviti…'; daj vse te elemente enako oddaljene od roba
   levo in desno, da bo na sredini«.

   Izmerjeno pri 390 px — dve različni napaki hkrati:

   ⚠ Naslov in oba poziva so bili **levo 15, desno 30**: stolpec
   `5ff0613` ima oblogo `15px 15px 15px 0` — desno 15, levo 0. Niso bili
   ožji, ampak **zamaknjeni z sredine**.

   ⚠ Iskalnik je bil **levo 30, desno 30**: gradnik `8ac8c3f` doda svojih
   15 px vodoravne obloge znotraj stolpca, ki ima svojih 15. Sredinsko
   poravnan je bil, a ožji od vsega drugega.

   Mera hiše na telefonu je **15 px** — toliko imajo kartice oglasov,
   vrtiljaki in odseki pod herojem. Zdaj toliko meri tudi vse v heroju.
   ====================================================================== */

@media (max-width: 767px) {

    /* naslov in poziva: obloga stolpca simetrična */
    :is(.elementor-9348, .elementor-8610) .elementor-element-5ff0613 > .elementor-widget-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* iskalnik: brez druge obloge vrh obloge stolpca */
    :is(.elementor-9348, .elementor-8610) .elementor-element-8ac8c3f {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ======================================================================
   72) O PORTALU NA TELEFONU: STOLPEC, KI SE NI HOTEL SKRČITI
   ----------------------------------------------------------------------
   Po popravku pasu (blok 61) je stran še vedno gledala 16 px čez rob.

   ⚠⚠ Kriv je bil naslov **»Zakaj izbrati Zdravstvena.info/zaposlitev?«**.
   Beseda `Zdravstvena.info/zaposlitev?` je 28 znakov brez presledka in je
   pri 26 px široka 371 px. Proga `1fr` ima samodejni najmanjši obseg
   `auto`, zato se **ne more skrčiti pod najožjo vsebino** — mreža je bila
   371 px široka v 320 px širokem starševu.

   Popravek je dvojni: proga sme pasti na nič (`minmax(0, 1fr)`), dolga
   beseda pa dobi možnost preloma. `overflow-wrap: anywhere` je izbran
   namenoma — za razliko od `break-word` **šteje tudi pri izračunu
   najožje vsebine**, in ravno to je tu bistvo.

   Naslov je na telefonu za spoznanje manjši, da se dolga beseda vklopi v
   eno vrsto in preloma sploh ne rabi.
   ====================================================================== */

@media (max-width: 991px) {

    .zdr-oportalu-telo {
        grid-template-columns: minmax(0, 1fr);
    }

    .zdr-oportalu-telo,
    .zdr-oportalu-telo__prednosti h2,
    .zdr-oportalu-poslanstvo h2,
    .zdr-oportalu-poslanstvo__zakljucek h3 {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767px) {

    .zdr-oportalu-telo__prednosti h2 {
        font-size: clamp(20px, 5.2vw, 26px);
        line-height: 1.2;
    }
}


/* ======================================================================
   73) BOOST NA TELEFONU: ŠKATLA S KANALI JE REZALA BESEDILO
   ----------------------------------------------------------------------
   Miha: »BOOST podstran poje tekst in box z instagramom«.

   ⚠⚠ To sem zakuhal sam v bloku 57. Pravilo
   `.zdr-boost-nakratko .zdr-boost-kanali { grid-template-columns:
   repeat(3, 1fr) }` je **bolj natančno** (0,2,0) od telefonskega pravila
   v `style.css` (0,1,0), zato je držalo tri stolpce tudi na telefonu.

   Trije stolpci so skupaj merili 561 px. Ker ima proga `1fr` samodejni
   najmanjši obseg `auto`, se mreža okoli njih **ni mogla skrčiti** — vsa
   vsebina levega stolpca je bila 561 px široka v 360 px širokem starševu
   in je štrlela 186 px čez rob, kjer jo je `overflow-x: clip` odrezal.
   Od tod »poje tekst«.

   Ista družina napake kot pri O portalu (blok 72): ne verjemi, da se bo
   `1fr` skrčil — najmanjši obseg je `auto`, dokler ne napišeš `minmax(0, …)`.
   ====================================================================== */

@media (max-width: 991px) {

    .zdr-boost-nakratko {
        grid-template-columns: minmax(0, 1fr);
    }

    .zdr-boost-nakratko .zdr-boost-kanali {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ======================================================================
   74) MOBILNI PREDAL: BERLJIVOST IN SKUPINA POD »AKTUALNO«
   ----------------------------------------------------------------------
   Miha s telefona: »mjbi white text bl vidn or smth« in »mi ne da menija,
   sam aktualno vidm«.

   Dvoje je bilo narobe.

   1. BARVA. Tema izriše postavke predala s `.sliding-menu li a` v
      `#979797` na ozadju `#202124`. Izmerjeno razmerje je **5,51 : 1** —
      dovolj za normo, premalo za telefon na soncu. Bela je bila samo
      trenutna stran, zato je bilo videti, kot da je označena ena sama
      postavka. Odslej `#E8ECF2` (**13,58 : 1**), bela ostane za trenutno
      stran in ob dotiku.

   2. SKUPINA. Mobilni predal je **namenoma ravna lista** — spustnih
      menijev nima. Postavke, ki na namizju stojijo pod »Aktualno«
      (BOOST oglas, Poklici, Predstavitve poklicev), so zato navadne
      postavke, nove pa se pripnejo na konec seznama — pristale so za
      jezikovnim preklopnikom. Vrstni red je popravljen v bazi
      (`delo/clanek-zobo-asistent/meni-mobilni.php`), tu jih samo zamaknemo,
      da se vidi, da gre za skupino.

   ⚠ Zamika NE delamo z otroki v meniju: tema bi jih dala v drsni podpanel
     in vsaka od njih bi bila oddaljena dodaten dotik. Na telefonu je ravna
     lista boljša.

   ⚠ Postavke so naslovljene po `menu-item-<ID>`. Če bi kdo postavko v
     meniju izbrisal in dodal na novo, dobi nov ID in se zamik izgubi —
     takrat popravi ta seznam.
   ====================================================================== */

body .apus-offcanvas .sliding-menu li > a,
body .apus-offcanvas .sliding-menu li > .sliding-menu__nav {
    color: #E8ECF2 !important;
}

body .apus-offcanvas .sliding-menu li > a:hover,
body .apus-offcanvas .sliding-menu li > a:focus,
body .apus-offcanvas .sliding-menu li.current-menu-item > a,
body .apus-offcanvas .sliding-menu li.current_page_item > a,
body .apus-offcanvas .sliding-menu li.active > a {
    color: #FFFFFF !important;
}

/* odmik postavk je 12px 20px; skupina dobi 40px z leve */
body .apus-offcanvas .sliding-menu li.menu-item-10741 > a,   /* SL BOOST oglas */
body .apus-offcanvas .sliding-menu li.menu-item-10704 > a,   /* SL Poklici */
body .apus-offcanvas .sliding-menu li.menu-item-10841 > a,   /* SL Predstavitve poklicev */
body .apus-offcanvas .sliding-menu li.menu-item-10742 > a,   /* EN BOOST ad */
body .apus-offcanvas .sliding-menu li.menu-item-10705 > a,   /* EN Professions */
body .apus-offcanvas .sliding-menu li.menu-item-10843 > a {  /* EN Profession guides */
    padding-left: 40px !important;
}


/* ======================================================================
   75) SEZNAM DELODAJALCEV: KARTICE KOT PRI UGLEDNIH  (23. 9. 2026)
   ----------------------------------------------------------------------
   Miha: »boxi so nerodno narejeni, naredi jih v boxih kot so ugledni
   delodajalci; zgoraj malo paddinga, da ne bo direktno pod črto že
   content; med oglasi ziher 20px spacea.«

   Arhiv je bil v pogledu »list« (vrstica čez vso širino, kartica v
   kartici, 0 px med vrsticami). Zdaj je v temi nastavljen pogled
   `grid` + `grid-v1` — ista predloga kot na strani Ugledni delodajalci
   (template-jobs/employers-styles/inner-grid-v1.php). Tu je samo
   postavitev: CSS mreža z enim `gap`, kot blok 53.

   ⚠ Vezano na `.employers-listing-wrapper.layout-type-grid` — ta razred
     izpiše samo arhiv delodajalcev (in njihove kategorije/lokacije).
   ====================================================================== */

/* odmik od glave strani */
section.page-job-board.for-employers {
    padding-top: 40px;
}

.employers-listing-wrapper.layout-type-grid .employers-wrapper > .row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 !important;
}

/* ⚠⚠ Bootstrapova počistka bi v mreži postala celici (glej blok 53) */
.employers-listing-wrapper.layout-type-grid .employers-wrapper > .row::before,
.employers-listing-wrapper.layout-type-grid .employers-wrapper > .row::after {
    display: none !important;
}

.employers-listing-wrapper.layout-type-grid .employers-wrapper > .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.employers-listing-wrapper.layout-type-grid .employers-wrapper > .row > [class*="col-"] > article {
    height: 100%;
}

/* brez kartice v kartici — isto kot `.widget-employers` v bloku 18 */
.employers-listing-wrapper .employer-grid.v1 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}

/* izpostavljeni delodajalec ohrani oznako, ki jo je imel v seznamu */
.employers-listing-wrapper article.employer-card.is-featured::after {
    content: "Izpostavljeno";
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--zi-gradient);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.6;
}
html[lang^="en"] .employers-listing-wrapper article.employer-card.is-featured::after {
    content: "Featured";
}

/* ob levem stolpcu s filtri so tri kartice preozke pod 1200 px */
@media (max-width: 1199px) {
    .employers-listing-wrapper.layout-type-grid .employers-wrapper > .row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    section.page-job-board.for-employers { padding-top: 24px; }
    .employers-listing-wrapper.layout-type-grid .employers-wrapper > .row { grid-template-columns: 1fr; }
}


/* ======================================================================
   76) PASICA 300 x 250 »POKLICI V ZDRAVSTVU«  (24. 9. 2026)
   ----------------------------------------------------------------------
   Miha: manjša pasica, ki pelje na vse predstavitve poklicev — v desni
   stolpec oglasa in še kam, »da dlje zadrživa obiskovalce«.
   Koda: inc/poklici-pasica.php. Ista družina kot pasica 300 x 600
   (style.css, »ZDR – PASICA 300x600«): fotografija, zavesa, besedilo ob
   dnu. Razlika: ležeča ploskev in nižji gumb, zato zavesa temni od
   leve proti desni in od zgoraj navzdol hkrati.
   ====================================================================== */

.zdr-poklici-pasica-ovoj {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.zdr-poklici-pasica {
    position: relative;
    display: block;
    width: 300px;
    max-width: 100%;
    aspect-ratio: 6 / 5;
    min-height: 250px;   /* v ožjem stolpcu (levi filtri pri 992–1199 px) ne sme zlesti */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    background: var(--zi-navy, #0B2340);
    text-decoration: none !important;
    isolation: isolate;
}

.zdr-poklici-pasica__slika {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 30%;
}

.zdr-poklici-pasica__zavesa {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 35, 64, .10) 0%, rgba(11, 35, 64, .55) 38%, rgba(13, 36, 116, .94) 100%);
}

.zdr-poklici-pasica__vsebina {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 18px 20px 20px;
}

.zdr-poklici-pasica__oznaka {
    display: block;
    margin-bottom: 6px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .78);
}

.zdr-poklici-pasica__naslov {
    display: block;
    margin-bottom: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    color: #FFFFFF;
}

.zdr-poklici-pasica__poved {
    display: block;
    margin-bottom: 14px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
}

.zdr-poklici-pasica__gumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #FFFFFF;
    border-radius: 12px;
    background: #FFFFFF;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    color: #0E4F94;
    transition: background-color .18s ease, color .18s ease;
}

.zdr-poklici-pasica:hover .zdr-poklici-pasica__gumb,
.zdr-poklici-pasica:focus-visible .zdr-poklici-pasica__gumb {
    background: transparent;
    color: #FFFFFF;
}

.zdr-poklici-pasica:focus-visible {
    outline: 3px solid #1160B4;
    outline-offset: 3px;
}

/* v levem stolpcu s filtri: odmik od kartice filtrov nad njo */
.sidebar-left .zdr-poklici-pasica-ovoj,
.filter-sidebar .zdr-poklici-pasica-ovoj {
    margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .zdr-poklici-pasica__gumb { transition: none; }
}


/* ======================================================================
   77) FOTOGRAFIJA OGLASA NA VRHU OPISA  (24. 9. 2026)
   ----------------------------------------------------------------------
   template-jobs/single-job_listing/description.php. Slika se pokaže
   CELA (brez obrezovanja): med naloženimi so plakati z besedilom.
   Pokončna je omejena na 560 px višine in stoji na sredini.
   ====================================================================== */

.zdr-oglas-slika {
    margin: 0 0 30px;
    padding: 16px !important;
    text-align: center;
}

.zdr-oglas-slika__img {
    display: block;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 560px;
    margin: 0 auto;
    border-radius: 12px;
}

@media (max-width: 767px) {
    .zdr-oglas-slika { margin-bottom: 20px; padding: 10px !important; }
    .zdr-oglas-slika__img { max-height: 480px; border-radius: 10px; }
}