@charset "UTF-8";
/* ===========================================================================
   infohub.helpreg.css  —  pomoč pri registraciji (Home/HelpNotLogged)
   ---------------------------------------------------------------------------
   Po osnutku »POMOČ pri registraciji InfoHub«. Naloži se ZA
   infohub.landing.css. Velikosti so v pikslih (Bootstrap 3: html 10px).

   Geometrija leve strani: navpična črtkana črta poteka skozi središče
   velikega kroga v glavi in skozi središča številk (--hr-axis).
   =========================================================================== */

.ih-hr {
    --hr-axis: 70px; /* x središča kroga v glavi in številk */
    --hr-head: 140px; /* premer kroga v glavi */
    --hr-num: 64px; /* premer številke */
    --hr-num-top: 22px; /* odmik številke od vrha kartice */
    --hr-gap: 22px; /* razmik med karticami */
    --hr-dark: #2f6a2c; /* temno zelena številk */
}

.ih-hr-sec {
    position: relative;
    overflow: hidden;
    padding: clamp(28px,3.4vw,56px) 0 clamp(44px,4.6vw,72px);
    background: radial-gradient(60% 50% at 0% 30%, rgba(163,204,114,.22) 0, rgba(163,204,114,0) 70%), radial-gradient(45% 45% at 100% 35%, rgba(163,204,114,.20) 0, rgba(163,204,114,0) 70%), #fff;
}

.ih-hr-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: clamp(32px,3.6vw,56px);
}

@media (min-width:1200px) {
    .ih-hr-grid {
        grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
        align-items: start;
    }
}

/* ---------------------------------------------------------------------------
   LEVO — glava in koraki
   ------------------------------------------------------------------------ */

.ih-hr-main {
    position: relative;
    max-width: 960px;
}

    /* črtkana črta od kroga v glavi do zadnje številke */
    .ih-hr-main::before {
        content: "";
        position: absolute;
        left: calc(var(--hr-axis) - 1.5px);
        top: calc(var(--hr-head) / 2 + 20px);
        bottom: 60px;
        border-left: 3px dashed #8fbf5c;
        z-index: 0;
    }

/* glava: velik krog + kartica z naslovom */
.ih-hr-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: var(--hr-head);
    margin-bottom: calc(var(--hr-gap) + 6px);
}

.ih-hr-head__ico {
    position: absolute;
    z-index: 2;
    left: calc(var(--hr-axis) - var(--hr-head) / 2);
    top: 50%;
    width: var(--hr-head);
    height: var(--hr-head);
    margin-top: calc(var(--hr-head) / -2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: radial-gradient(circle at 38% 32%, #6aa83a 0%, #3f7f22 62%, #2f6a1d 100%);
    box-shadow: 0 0 0 9px #e3f0d6, 0 0 0 11px #fff, 0 16px 34px rgba(47,106,44,.28);
}

    .ih-hr-head__ico svg {
        width: 46%;
        height: 46%;
    }

.ih-hr-head__card {
    flex: 1;
    margin-left: var(--hr-axis);
    padding: 22px 30px 22px calc(var(--hr-head) / 2 + 26px);
    border-radius: 42px;
    background: #fff;
    border: 2px solid #dcebcf;
    box-shadow: 0 14px 34px rgba(47,106,44,.10);
}

.ih-lp .ih-hr-head h1 {
    margin: 0;
    line-height: 1;
}

.ih-lp .ih-hr-kicker {
    display: block;
    font-size: clamp(40px,4.4vw,64px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #0f3a32;
}

.ih-lp .ih-hr-h1b {
    display: block;
    margin-top: 6px;
    font-size: clamp(28px,3.1vw,46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: var(--ih-green-600);
}

.ih-lp .ih-hr-head p {
    margin-top: 12px;
    font-size: clamp(15px,1.25vw,18px);
    line-height: 1.4;
    color: #33445a;
}

/* koraki — predpona .ih-lp zaradi `.ih-lp ol/ul{margin:0;padding:0}` */
.ih-lp .ih-hr-steps {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--hr-gap);
}

.ih-hr-step {
    position: relative;
}

.ih-hr-num {
    position: absolute;
    z-index: 2;
    left: calc(var(--hr-axis) - var(--hr-num) / 2);
    top: var(--hr-num-top);
    width: var(--hr-num);
    height: var(--hr-num);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 38% 32%, #4f8f2c 0%, var(--hr-dark) 70%);
    color: #fff;
    font-size: calc(var(--hr-num) * .5);
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #b9d99a, 0 8px 18px rgba(47,106,44,.25);
}

.ih-hr-card {
    margin-left: var(--hr-axis);
    display: flex;
    align-items: flex-start;
    gap: clamp(16px,1.8vw,26px);
    padding: clamp(18px,1.8vw,24px) clamp(18px,2vw,30px) clamp(18px,1.8vw,24px) calc(var(--hr-num) / 2 + 22px);
    border-radius: 30px;
    background: #fff;
    border: 1px solid #e3eedb;
    box-shadow: 0 10px 30px rgba(21,50,31,.08);
}

.ih-hr-ico {
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 40% 35%, #f3f9ec 0%, #e1efd2 75%);
    color: var(--ih-green-700);
}

    .ih-hr-ico svg {
        width: 40px;
        height: 40px;
    }

.ih-hr-text {
    flex: 1;
    min-width: 0;
    padding-top: 10px;
}

.ih-lp .ih-hr-text > p {
    font-size: clamp(16px,1.3vw,20px);
    line-height: 1.45;
    color: #26384d;
}

.ih-hr-text b,
.ih-hr-text a,
.ih-hr-text a:visited {
    font-weight: 800;
    color: var(--ih-green-600) !important;
}

.ih-hr-text a {
    text-decoration: none;
}

    .ih-hr-text a:hover,
    .ih-hr-text a:focus {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* 2 · seznam s kljukicami v dveh stolpcih */
.ih-hr-checks {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 6px 28px;
    margin-top: 12px;
}

@media (min-width:576px) {
    .ih-hr-checks {
        grid-template-columns: minmax(0,.8fr) minmax(0,1.3fr);
    }
}

.ih-lp .ih-hr-checks ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    align-content: start;
}

.ih-hr-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: clamp(14.5px,1.1vw,16px);
    line-height: 1.35;
    color: #2f3d34;
}

.ih-hr-checks svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 0;
    color: var(--ih-green-600);
}

.ih-hr-checks li > span {
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ---------------------------------------------------------------------------
   DESNO — zaslon z obrazcem, velik krog, ikone na loku (samo okras)
   ------------------------------------------------------------------------ */

.ih-hr-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / .98;
}

@media (min-width:1200px) {
    .ih-hr-visual {
        position: sticky;
        top: 24px;
        margin-top: clamp(40px,4vw,80px);
    }
}

@media (min-width:768px) and (max-width:1199px) {
    .ih-hr-visual {
        max-width: 640px;
        margin-inline: auto;
    }
}

@media (max-width:767px) {
    .ih-hr-visual {
        display: none;
    }
}

/* velik zelen krog z ikono uporabnika */
.ih-hr-big {
    position: absolute;
    left: 50%;
    top: -4%;
    width: 42%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: radial-gradient(circle at 40% 35%, #8cc65a 0%, #5d9a33 60%, #4a842a 100%);
    box-shadow: 0 0 0 clamp(14px,1.6vw,26px) rgba(163,204,114,.45), 0 0 0 clamp(28px,3.2vw,52px) rgba(163,204,114,.18);
}

    .ih-hr-big svg {
        width: 52%;
        height: 52%;
        transform: translate(4%, -4%);
    }

/* lok, na katerem so tri ikone */
.ih-hr-arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

    .ih-hr-arc path {
        fill: none;
        stroke: #8fc85a;
        stroke-width: .9;
        stroke-linecap: round;
        filter: drop-shadow(0 0 3px rgba(143,200,90,.6));
    }

.ih-hr-bub {
    position: absolute;
    z-index: 3;
    width: 16%;
    aspect-ratio: 1;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--ih-green-700);
    border: 3px solid #a8d47c;
    box-shadow: 0 0 0 6px rgba(168,212,124,.25), 0 10px 24px rgba(47,106,44,.18);
}

    .ih-hr-bub svg {
        width: 52%;
        height: 52%;
    }
/* središča na loku: C = (66, 46), r = 44 */
.ih-hr-bub--1 {
    left: 40.8%;
    top: 10%;
}

.ih-hr-bub--2 {
    left: 22.2%;
    top: 42.2%;
}

.ih-hr-bub--3 {
    left: 30%;
    top: 71.2%;
}

/* zaslon */
.ih-hr-monitor {
    position: absolute;
    z-index: 2;
    left: 27%;
    top: 31%;
    width: 73%;
    container-type: inline-size;
    transform: perspective(1600px) rotateY(-13deg);
    transform-origin: left center;
}

.ih-hr-screen {
    position: relative;
    aspect-ratio: 16 / 11.2;
    border-radius: 14px;
    border: clamp(7px,.9vw,12px) solid #1c2229;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(15,30,20,.30);
    font-size: 11px; /* rezerva za brskalnike brez cqw */
    font-size: 1.82cqw;
    color: #23313f;
}
/* stojalo */
.ih-hr-monitor::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 16%;
    height: 13cqw;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #b8bec6, #eef1f4 45%, #c3c9d0);
    clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}

.ih-hr-monitor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 12.5cqw);
    width: 42%;
    height: 2.2cqw;
    transform: translateX(-50%);
    border-radius: 50%;
    background: linear-gradient(#f2f4f6, #b9c0c8);
    box-shadow: 0 8px 16px rgba(0,0,0,.15);
}

/* vsebina zaslona */
.ih-hr-app__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 16%;
    padding: 0 4%;
    background: linear-gradient(90deg, #17331f, #23452c);
}

.ih-hr-app__logo {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: 2em;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.ih-lp .ih-hr-app__logo img {
    width: 1.25em;
    height: 1.25em;
    max-width: none;
}

.ih-hr-app__nav {
    display: flex;
    gap: 1.4em;
}

    .ih-hr-app__nav i {
        display: block;
        width: 3.2em;
        height: .55em;
        border-radius: 1em;
        background: rgba(255,255,255,.5);
    }

.ih-hr-app__body {
    display: grid;
    grid-template-columns: 24% 1fr;
    height: 84%;
}

.ih-hr-app__side {
    display: flex;
    flex-direction: column;
    gap: .6em;
    padding: 1.6em .6em;
    background: #f5f8f3;
    border-right: 1px solid #e3eadf;
}

    .ih-hr-app__side span {
        display: flex;
        align-items: center;
        gap: .6em;
        padding: .65em .55em;
        border-radius: .6em;
        color: #3b4a58;
    }

    .ih-hr-app__side svg {
        width: 1.3em;
        height: 1.3em;
        flex: none;
    }

    .ih-hr-app__side i,
    .ih-hr-mf i,
    .ih-hr-app__logo-drop i {
        display: block;
        height: .55em;
        border-radius: 1em;
        background: #d7dee3;
    }

    .ih-hr-app__side i {
        width: 4.4em;
    }

    .ih-hr-app__side .is-active {
        background: var(--ih-green-600);
        color: #fff;
        box-shadow: 0 .3em .8em rgba(47,106,44,.3);
    }

    .ih-hr-app__side b {
        font-weight: 700;
        font-size: .82em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.ih-hr-app__form {
    display: flex;
    flex-direction: column;
    gap: .6em;
    padding: 1.2em 1.8em 1.1em;
    min-width: 0;
}

.ih-hr-app__title {
    font-size: 1.6em;
    font-weight: 800;
    color: #1b2a36;
}

.ih-hr-app__grid {
    display: grid;
    grid-template-columns: 1fr 34%;
    gap: 1.2em;
}

.ih-hr-app__fields {
    display: grid;
    gap: .45em;
}

.ih-hr-mf {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7em;
    height: 2.05em;
    padding: 0 .8em;
    border: 1px solid #dfe5ea;
    border-radius: .5em;
    background: #fff;
    color: #5b6a78;
}

    .ih-hr-mf svg {
        width: 1.15em;
        height: 1.15em;
        flex: none;
    }

    .ih-hr-mf i {
        width: 38%;
    }

.ih-hr-mf--select::after {
    content: "";
    position: absolute;
    right: .9em;
    top: 50%;
    width: .5em;
    height: .5em;
    margin-top: -.4em;
    border-right: 2px solid #5b6a78;
    border-bottom: 2px solid #5b6a78;
    transform: rotate(45deg);
}

.ih-hr-app__logo-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6em;
    border: 1.5px dashed #cfd8df;
    border-radius: .7em;
    color: #8a97a3;
    background: #fbfcfd;
}

    .ih-hr-app__logo-drop svg {
        width: 2.6em;
        height: 2.6em;
    }

    .ih-hr-app__logo-drop i {
        width: 55%;
    }

        .ih-hr-app__logo-drop i + i {
            width: 35%;
            background: #e6ebef;
        }

.ih-hr-app__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45em 1em;
}

.ih-hr-app__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .8em;
    margin-top: .3em;
    padding: .75em 2.4em;
    border-radius: 2em;
    background: linear-gradient(180deg, #4f8a2b, #3a7020);
    color: #fff;
    font-weight: 700;
    font-size: 1.1em;
    box-shadow: 0 .4em 1em rgba(47,106,44,.35);
}

    .ih-hr-app__btn svg {
        width: 1.2em;
        height: 1.2em;
    }

/* ---------------------------------------------------------------------------
   OZKI ZASLONI
   ------------------------------------------------------------------------ */

@media (max-width:575px) {
    .ih-hr {
        --hr-axis: 44px;
        --hr-head: 88px;
        --hr-num: 46px;
        --hr-num-top: 16px;
        --hr-gap: 16px;
    }

    .ih-hr-head__ico {
        box-shadow: 0 0 0 6px #e3f0d6, 0 0 0 8px #fff, 0 10px 22px rgba(47,106,44,.25);
    }

    .ih-hr-head__card {
        padding: 16px 16px 16px calc(var(--hr-head) / 2 + 14px);
        border-radius: 28px;
    }

    .ih-hr-card {
        flex-direction: column;
        gap: 10px;
        padding: 16px 16px 16px calc(var(--hr-num) / 2 + 14px);
        border-radius: 22px;
    }

    .ih-hr-ico {
        width: 52px;
        height: 52px;
    }

        .ih-hr-ico svg {
            width: 26px;
            height: 26px;
        }

    .ih-hr-text {
        padding-top: 0;
    }
}