@charset "UTF-8";
/* ===========================================================================
   efollowr.pages.css — Prijava / Registracija / Iskanje QR / Pomoč
   ---------------------------------------------------------------------------
   NAMESTITEV: vsaka od štirih strani jo vključi sama prek @section META,
   TAKOJ ZA efollowr.landing.css (od tam prihajajo --lp-* tokeni in razredi
   .ef-lp-btn, .ef-lp-eyebrow). Nobena druga stran je ne naloži.

   Vse ima predpono `lp-`. Site.css in OurStyles.css teh imen ne poznajo.
   =========================================================================== */

/* Vse štiri strani so imele svoj <style> blok z `#ContentWrapper{padding:0}`.
   Zdaj je to na enem mestu in velja samo, kadar je razred `ef-lp` prisoten. */
body:has(.ef-lp) #ContentWrapper{ padding:0 !important; height:auto !important; }
body:has(.ef-lp) #ContentWrapper > article{
  display:block !important; overflow:visible !important; width:100%; margin:0;
}

/* ---------------------------------------------------------------------------
   RAZDELITEV NA DVE POLOVICI
   Levo vsebina/obrazec, desno promocijska plošča z lebdečo kartico slike.
   ------------------------------------------------------------------------ */

.lp-split{
  min-height:calc(100vh - 90px);
  background:linear-gradient(180deg,#fbfdfe 0%,#f2f7fa 100%);
}
.lp-split__grid{
  max-width:1240px;
  margin-inline:auto;
  padding:clamp(40px,6vw,72px) clamp(20px,4vw,40px) clamp(64px,8vw,96px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px,5vw,64px);
  align-items:start;
}
@media (min-width:992px){
  .lp-split__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; }
}
/* promo plošča naj bo poravnana z vrhom obrazca in ostane vidna ob dolgem drsanju */
@media (min-width:992px){
  .lp-promo{ position:sticky; top:24px; }
}

.lp-split__main{ min-width:0; }

.lp-split h1{ margin-top:20px; font-size:clamp(2rem,3.6vw,2.7rem); }
.lp-split__lead{ margin-top:16px; font-size:1.05rem; color:var(--lp-body); max-width:56ch; }

/* Karta z obrazcem */
.lp-card{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-card, 20px);
  box-shadow:var(--lp-shadow);
  padding:clamp(28px,3vw,40px);
  margin-top:30px;
}

/* ---------------------------------------------------------------------------
   PROMOCIJSKA PLOŠČA (desni stolpec)
   ------------------------------------------------------------------------ */

.lp-promo{
  background:var(--lp-navy);
  border-radius:24px;
  padding:clamp(32px,3.4vw,44px);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.lp-promo::after{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:220px; height:220px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
}
.lp-promo h2{
  color:#fff;
  font-size:clamp(1.5rem,2.4vw,1.9rem);
  margin:0;
  position:relative;
}
.lp-promo p{
  color:#c3dce3;
  margin-top:14px;
  font-size:15px;
  line-height:1.65;
  position:relative;
}
.lp-promo .ef-lp-btn{ margin-top:24px; position:relative; }
.lp-promo .ef-lp-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.lp-promo .ef-lp-btn--ghost:hover{ border-color:#fff; }

.lp-promo__art{
  margin-top:28px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  aspect-ratio:16/11;
  position:relative;
}
.lp-promo__art img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------------------------------------------------------------------
   OBRAZEC
   Polja 14px po dokumentu; oznaka nad poljem, ne poleg.
   ------------------------------------------------------------------------ */

.lp-field{ margin-bottom:18px; }
.lp-field:last-of-type{ margin-bottom:0; }

.lp-label{
  display:inline;
  font-size:13.5px;
  font-weight:700;
  color:var(--lp-ink);
  margin-bottom:0;
}
/* Label in zvezdica v isti vrstici. .lp-field__head ju objame. */
.lp-field__head{
  display:flex;
  align-items:baseline;
  gap:4px;
  margin-bottom:8px;
}
.lp-field__head .req,
.lp-field .req{ color:var(--lp-action); font-weight:800; }
/* MVC label ponekod nima razreda .lp-label; poskrbimo, da so vsi videti enako */
.lp-field__head label{
  font-size:13.5px;
  font-weight:700;
  color:var(--lp-ink);
  margin:0;
}

.lp-field input[type="text"],
.lp-field input[type="email"],
.lp-field input[type="password"],
.lp-field input[type="tel"],
.lp-field select,
.lp-field textarea{
  width:100%;
  font-family:inherit;
  font-size:15.5px;
  color:var(--lp-ink);
  background:#fbfcfd;
  border:1.5px solid var(--lp-line);
  border-radius:14px;
  padding:13px 16px;
  height:auto;
  transition:border-color .18s var(--lp-ease), background-color .18s var(--lp-ease), box-shadow .18s var(--lp-ease);
}
.lp-field input:hover,.lp-field select:hover{ border-color:var(--lp-secondary); }
.lp-field input:focus,.lp-field select:focus,.lp-field textarea:focus{
  outline:none;
  background:#fff;
  border-color:var(--lp-primary);
  box-shadow:0 0 0 4px rgba(2,102,121,.12);
}

.lp-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:18px 0;
  font-size:14.5px;
  color:var(--lp-body);
}
.lp-check input[type="checkbox"]{
  margin-top:3px;
  width:18px; height:18px;
  flex:none;
  accent-color:var(--lp-primary);
}
.lp-check a{ color:var(--lp-primary); font-weight:700; text-decoration:none; }
.lp-check a:hover{ text-decoration:underline; }

.lp-field .field-validation-error,
.lp-error{
  display:block;
  color:var(--lp-action);
  font-size:12.5px;
  margin-top:6px;
  font-weight:600;
}
.validation-summary-errors{
  color:var(--lp-action);
  background:#fdeceb;
  border:1px solid #f6c9c4;
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:20px;
  font-size:14.5px;
}
.validation-summary-errors ul{ margin:0; padding-left:20px; }

.lp-submit{ width:100%; justify-content:center; margin-top:6px; }

.lp-foot-links{ margin-top:20px; font-size:14.5px; color:var(--lp-muted); }
.lp-foot-links a{ color:var(--lp-primary); font-weight:700; text-decoration:none; }
.lp-foot-links a:hover{ text-decoration:underline; }
.lp-foot-links p{ margin-top:8px; }

/* Registracija: obrazec je dolg — vmesni naslovi ga razčlenijo */
.lp-fieldset-title{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lp-muted);
  margin:26px 0 14px;
  padding-top:20px;
  border-top:1px solid var(--lp-line);
}
.lp-fieldset-title:first-child{ margin-top:0; padding-top:0; border-top:0; }

.lp-imgpreview{ margin-top:10px; }
.lp-imgpreview img{
  max-height:70px;
  border:1px solid var(--lp-line);
  border-radius:10px;
  background:#fff;
}

.lp-inline-2{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:560px){ .lp-inline-2{ grid-template-columns:1fr 1fr; } }

/* ---------------------------------------------------------------------------
   KORAKI S ŠTEVILKAMI — HelpNotLogged, SearchQR
   Nadomešča .numberMedium (6em oranžna 3.8) in ročne .row/.col vrstice.
   ------------------------------------------------------------------------ */

.lp-steps{ margin-top:34px; display:grid; gap:26px; }

.lp-step{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:18px;
  align-items:start;
}
.lp-step__n{
  width:56px; height:56px;
  border-radius:16px;
  background:var(--lp-section);
  border:1px solid var(--lp-line);
  color:var(--lp-primary);
  font-size:22px;
  font-weight:800;
  display:grid;
  place-items:center;
}
.lp-step__body p{ font-size:15.5px; line-height:1.65; color:var(--lp-body); }

.lp-checklist{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:11px; }
.lp-checklist li{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:15px;
  color:var(--lp-body);
}
.lp-checklist li::before{
  content:"";
  flex:none;
  width:20px; height:20px;
  margin-top:2px;
  border-radius:6px;
  background:var(--lp-primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------------------------------------------------------------------------
   ISKALNIK IN SEZNAM PONUDNIKOV — SearchQR
   ------------------------------------------------------------------------ */

.lp-search{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}
.lp-search input[type="text"]{
  flex:1 1 260px;
  font-size:15.5px;
  border:1.5px solid var(--lp-line);
  border-radius:14px;
  padding:13px 16px;
}
.lp-search input[type="text"]:focus{
  outline:none;
  border-color:var(--lp-primary);
  box-shadow:0 0 0 4px rgba(2,102,121,.12);
}

.lp-filters{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
  margin:30px 0 8px;
}
@media (min-width:560px){ .lp-filters{ grid-template-columns:1fr 1fr; max-width:560px; } }
.lp-filters select{
  width:100%;
  font-size:15px;
  border:1.5px solid var(--lp-line);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
}

.lp-providers{
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
  align-items:start;
  margin-top:26px;
}
@media (min-width:640px){ .lp-providers{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:992px){ .lp-providers{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* providerPlaceholder je NEPOSREDNI grid item (JS ga skriva prek display).
   Brez min-width:0 se dolga vsebina (naslov, opis) razširi čez celico in
   raztegne stolpec — to je bil vzrok neenakih širin. */
.lp-providers > .providerPlaceholder{ min-width:0; display:flex; flex-direction:column; gap:8px; }
.lp-providers > .providerPlaceholder > .lp-provider{ width:100%; }

.lp-provider{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--lp-shadow);
  transition:transform .2s var(--lp-ease), box-shadow .2s var(--lp-ease);
}
.lp-provider:hover{ transform:translateY(-4px); box-shadow:var(--lp-shadow-lift); }

.lp-provider__top{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10px;
  padding:18px;
  border-bottom:1px solid var(--lp-line);
  background:var(--lp-section);
}
.lp-provider__top img{ max-height:70px; width:auto; margin:0 auto; display:block; }

.lp-provider__body{ padding:16px 18px 18px; }
.lp-provider__title{
  font-size:16.5px;
  font-weight:800;
  color:var(--lp-ink);
  text-decoration:none;
  display:block;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lp-provider__title:hover{ color:var(--lp-primary); }
.lp-provider__desc{
  font-size:14px;
  color:var(--lp-muted);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lp-admin-note{
  background:#fef3e0;
  border:1px solid #f3d9a3;
  border-radius:14px;
  padding:14px 18px;
  font-size:14.5px;
  color:#8a5a00;
  margin-top:20px;
}
.lp-admin-toggle{
  font-size:12.5px;
  font-weight:700;
  color:var(--lp-secondary) !important;
}

@media (prefers-reduced-motion:reduce){
  .lp-provider,.lp-provider:hover{ transition:none; transform:none; }
}


/* ---------------------------------------------------------------------------
   POMOČ: kritje za razrede, ki prihajajo ZNOTRAJ resursov
   HelpReg* in HelpUser* vsebujejo že oblikovan HTML s temi razredi. Ker jih
   izpišemo z Html.Raw, jih ne moremo preimenovati — damo jim pravo obliko tu.
   ------------------------------------------------------------------------ */

.ef-lp .textGreen{ color:var(--lp-primary); font-weight:700; }
.ef-lp .textGreenTitle{
  display:block;
  color:var(--lp-ink);
  font-family:'Manrope',sans-serif;
  font-size:1.2rem;
  font-weight:800;
  margin:0 0 10px;
  letter-spacing:-.01em;
}
.ef-lp .textOrange{ color:var(--lp-action); font-weight:800; }
.ef-lp .textNormal{ color:var(--lp-ink); font-weight:700; }
.ef-lp .boldText{ font-weight:800; }
.ef-lp .textIkoneZgoraj{ color:var(--lp-body); margin:0 0 4px; }

/* Registracijski obrazec, vgnezden v HelpReg7–16 kot 16-stolpčna tabela,
   je bil vzrok za razlitje čez rob. Znotraj .lp-reg-preview ga zložimo v
   pregleden seznam parov "številka | polje". */
.lp-reg-preview{
  margin-top:14px;
  border:1px solid var(--lp-line);
  border-radius:14px;
  overflow:hidden;
}
.lp-reg-preview p{
  margin:0 !important;
  padding:11px 16px;
  border-top:1px solid var(--lp-line);
  font-size:14.5px;
  color:var(--lp-body);
  display:flex;
  gap:10px;
  align-items:baseline;
}
.lp-reg-preview p:first-child{ border-top:0; background:var(--lp-section); font-weight:700; color:var(--lp-ink); }
.lp-reg-preview .textOrange{ flex:none; min-width:26px; }

/* Diagram in slike na strani Pomoč: v mirno ploščo, ne kot ozadje */
.lp-help-figure{
  margin-top:30px;
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:18px;
  box-shadow:var(--lp-shadow);
  padding:22px;
  text-align:center;
}
.lp-help-figure img{ max-height:340px; width:auto; margin:0 auto; }
.lp-help-figure + .lp-help-figure{ margin-top:18px; }

/* Sklop koraka na strani HelpNotLoggedUser */
.lp-help-block{ margin-top:34px; }
.lp-help-block .lp-checklist{ margin-top:14px; }


/* ---------------------------------------------------------------------------
   POMOČ: dvostolpčna postavitev — besedilo levo, slike desno brez okvirja
   ------------------------------------------------------------------------ */

.lp-help-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(32px,5vw,56px);
  align-items:start;
}
@media (min-width:992px){
  .lp-help-grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}

/* slike na desni – gole, brez bele plošče in obrobe */
.lp-help-visuals{ display:flex; flex-direction:column; gap:26px; }
@media (min-width:992px){ .lp-help-visuals{ position:sticky; top:24px; } }
.lp-help-visuals img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
}
.lp-help-visuals figure{ margin:0; }


/* ZAOBLJENJE VHODOV (javni del) */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea, .form-control{ border-radius:12px; }
textarea{ border-radius:14px; }
/* ===========================================================================
   POMOČ ZA OBISKOVALCE — velikost podnaslovov in številk korakov
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.pages.css.

   VZROK
   Podnaslova "Namestitev mobilne aplikacije" in "Kje najdem QR kodo?" sta
   razred .textGreenTitle, ki ima v tej datoteki velikost 1.2rem. Na tem
   portalu je html{font-size} zmanjšan, zato je 1.2rem okoli 12px — manj kot
   besedilo pod njim. Zato so vrednosti spodaj v PIKSLIH.

   HIERARHIJA, ki jo s tem dobimo:
     h1 (naslov strani)      clamp(2rem,3.6vw,2.7rem) — največji
     .textGreenTitle         26px                      — vmes
     besedilo                15.5px                    — najmanjši
   =========================================================================== */

/* --- podnaslova ---------------------------------------------------------- */

.ef-lp .textGreenTitle{
  display:block;
  font-size:26px !important;          /* prej 1.2rem */
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--lp-ink);
  margin:0 0 14px;
}

@media (max-width:575px){
  .ef-lp .textGreenTitle{ font-size:22px !important; }
}

/* --- številke ob podnaslovih --------------------------------------------- */

/*  Številka mora zdržati ob večjem podnaslovu, sicer je videti kot pripis.
    Škatla raste s pisavo, mreža .lp-step pa mora slediti — prvi stolpec je
    tam določen na 56px in bi številko odrezal.                              */

.lp-step{ grid-template-columns:68px 1fr; gap:22px; }

.lp-step__n{
  width:68px;
  height:68px;
  border-radius:20px;
  font-size:28px;
  font-weight:800;
  line-height:1;
}

@media (max-width:575px){
  .lp-step{ grid-template-columns:54px 1fr; gap:16px; }
  .lp-step__n{ width:54px; height:54px; border-radius:16px; font-size:23px; }
}

/* --- besedilo koraka ----------------------------------------------------- */

/*  Razmik med podnaslovom in odstavki, da povečan naslov ne sedi na besedilu. */
.lp-step__body > p{ margin-bottom:12px; }
.lp-step__body > p:last-child{ margin-bottom:0; }
/* ===========================================================================
   POMOČ ZA OBISKOVALCE — velikost podnaslovov in številk korakov
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.pages.css.

   VZROK
   Podnaslova "Namestitev mobilne aplikacije" in "Kje najdem QR kodo?" sta
   razred .textGreenTitle, ki ima v tej datoteki velikost 1.2rem. Na tem
   portalu je html{font-size} zmanjšan, zato je 1.2rem okoli 12px — manj kot
   besedilo pod njim. Zato so vrednosti spodaj v PIKSLIH.

   Poleg tega so odstranjene številke korakov — glej blok "koraki brez
   številk" spodaj.

   HIERARHIJA, ki jo s tem dobimo:
     h1 (naslov strani)      clamp(2rem,3.6vw,2.7rem) — največji
     .textGreenTitle         26px                      — vmes
     besedilo                15.5px                    — najmanjši
   =========================================================================== */

/* --- podnaslova ---------------------------------------------------------- */

.ef-lp .textGreenTitle{
  display:block;
  font-size:26px !important;          /* prej 1.2rem */
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--lp-ink);
  margin:0 0 14px;
}

@media (max-width:575px){
  .ef-lp .textGreenTitle{ font-size:22px !important; }
}

/* --- koraki brez številk -------------------------------------------------- */

/*  .lp-step iz efollowr.pages.css predvideva dva stolpca: 56px za številko in
    preostanek za besedilo. Ko številke ni, bi prvi stolpec ostal prazen in
    besedilo bi bilo zamaknjeno za 74px v desno. Zato mrežo tu zložimo v en
    stolpec — modifikator, da ostanejo številke na drugih straneh pomoči
    (SearchQR, HelpNotLogged) nedotaknjene.                                  */

.lp-steps--plain .lp-step{
  display:block;
  grid-template-columns:none;
  gap:0;
}

.lp-steps--plain .lp-step__n{ display:none; }

/*  Brez številk koraka nista več vidno ločena, zato ju loči črta. Razmik je
    večji od razmika med odstavki znotraj koraka, da je hierarhija jasna.    */
.lp-steps--plain{ gap:0; }

.lp-steps--plain .lp-step + .lp-step{
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid var(--lp-line);
}

/* --- besedilo koraka ----------------------------------------------------- */

/*  Razmik med podnaslovom in odstavki, da povečan naslov ne sedi na besedilu. */
.lp-step__body > p{ margin-bottom:12px; }
.lp-step__body > p:last-child{ margin-bottom:0; }
/* ===========================================================================
   POMOČ ZA OBISKOVALCE — velikost podnaslovov in številk korakov
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.pages.css.

   VZROK
   Podnaslova "Namestitev mobilne aplikacije" in "Kje najdem QR kodo?" sta
   razred .textGreenTitle, ki ima v tej datoteki velikost 1.2rem. Na tem
   portalu je html{font-size} zmanjšan, zato je 1.2rem okoli 12px — manj kot
   besedilo pod njim. Zato so vrednosti spodaj v PIKSLIH.

   Poleg tega so odstranjene številke korakov — glej blok "koraki brez
   številk" spodaj.

   HIERARHIJA, ki jo s tem dobimo:
     h1 (naslov strani)      40px   — največji
     .textGreenTitle         24px   — vmes
     besedilo                15.5px — najmanjši

   ZAKAJ TUDI h1 V PIKSLIH
   .lp-split h1 ima clamp(2rem, 3.6vw, 2.7rem). Zgornja meja je v rem, zato
   je pri zmanjšanem html{font-size} okoli 27px — in clamp() naslov omeji
   prav na to, ne glede na širino okna. Podnaslov pri 26px je bil zato skoraj
   enako velik. Dokler so v teh datotekah rem vrednosti, je vsak razmik med
   ravnmi hierarhije stvar naključja.
   =========================================================================== */


/* --- naslov strani ------------------------------------------------------- */

.ef-lp.lp-split h1{
  font-size:40px !important;          /* prej clamp(2rem,3.6vw,2.7rem) */
  line-height:1.15;
  letter-spacing:-.02em;
}

@media (max-width:767px){
  .ef-lp.lp-split h1{ font-size:30px !important; }
}

/* --- podnaslova ---------------------------------------------------------- */

.ef-lp .textGreenTitle{
  display:block;
  font-size:24px !important;          /* prej 1.2rem */
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--lp-ink);
  margin:0 0 14px;
}

@media (max-width:575px){
  .ef-lp .textGreenTitle{ font-size:20px !important; }
}

/* --- koraki brez številk -------------------------------------------------- */

/*  .lp-step iz efollowr.pages.css predvideva dva stolpca: 56px za številko in
    preostanek za besedilo. Ko številke ni, bi prvi stolpec ostal prazen in
    besedilo bi bilo zamaknjeno za 74px v desno. Zato mrežo tu zložimo v en
    stolpec — modifikator, da ostanejo številke na drugih straneh pomoči
    (SearchQR, HelpNotLogged) nedotaknjene.                                  */

.lp-steps--plain .lp-step{
  display:block;
  grid-template-columns:none;
  gap:0;
}

.lp-steps--plain .lp-step__n{ display:none; }

/*  Brez številk koraka nista več vidno ločena, zato ju loči črta. Razmik je
    večji od razmika med odstavki znotraj koraka, da je hierarhija jasna.    */
.lp-steps--plain{ gap:0; }

.lp-steps--plain .lp-step + .lp-step{
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid var(--lp-line);
}

/* --- besedilo koraka ----------------------------------------------------- */

/*  Razmik med podnaslovom in odstavki, da povečan naslov ne sedi na besedilu. */
.lp-step__body > p{ margin-bottom:12px; }
.lp-step__body > p:last-child{ margin-bottom:0; }
/* ===========================================================================
   POMOČ ZA OBISKOVALCE — velikost podnaslovov in številk korakov
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.pages.css.

   VZROK
   Podnaslova "Namestitev mobilne aplikacije" in "Kje najdem QR kodo?" sta
   razred .textGreenTitle, ki ima v tej datoteki velikost 1.2rem. Na tem
   portalu je html{font-size} zmanjšan, zato je 1.2rem okoli 12px — manj kot
   besedilo pod njim. Zato so vrednosti spodaj v PIKSLIH.

   Poleg tega so odstranjene številke korakov — glej blok "koraki brez
   številk" spodaj.

   HIERARHIJA, ki jo s tem dobimo:
     h1 (naslov strani)      40px   — največji
     .textGreenTitle         24px   — vmes
     besedilo                15.5px — najmanjši

   ZAKAJ TUDI h1 V PIKSLIH
   .lp-split h1 ima clamp(2rem, 3.6vw, 2.7rem). Zgornja meja je v rem, zato
   je pri zmanjšanem html{font-size} okoli 27px — in clamp() naslov omeji
   prav na to, ne glede na širino okna. Podnaslov pri 26px je bil zato skoraj
   enako velik. Dokler so v teh datotekah rem vrednosti, je vsak razmik med
   ravnmi hierarhije stvar naključja.
   =========================================================================== */


/* --- naslov strani ------------------------------------------------------- */

.ef-lp.lp-split h1{
  font-size:40px !important;          /* prej clamp(2rem,3.6vw,2.7rem) */
  line-height:1.15;
  letter-spacing:-.02em;
}

@media (max-width:767px){
  .ef-lp.lp-split h1{ font-size:30px !important; }
}

/* --- podnaslova ---------------------------------------------------------- */

.ef-lp .textGreenTitle{
  display:block;
  font-size:24px !important;          /* prej 1.2rem */
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--lp-ink);
  margin:0 0 14px;
}

@media (max-width:575px){
  .ef-lp .textGreenTitle{ font-size:20px !important; }
}

/* --- koraki brez številk -------------------------------------------------- */

/*  .lp-step iz efollowr.pages.css predvideva dva stolpca: 56px za številko in
    preostanek za besedilo. Ko številke ni, bi prvi stolpec ostal prazen in
    besedilo bi bilo zamaknjeno za 74px v desno. Zato mrežo tu zložimo v en
    stolpec — modifikator, da ostanejo številke na drugih straneh pomoči
    (SearchQR, HelpNotLogged) nedotaknjene.                                  */

.lp-steps--plain .lp-step{
  display:block;
  grid-template-columns:none;
  gap:0;
}

.lp-steps--plain .lp-step__n{ display:none; }

/*  Brez številk koraka nista več vidno ločena, zato ju loči črta. Razmik je
    večji od razmika med odstavki znotraj koraka, da je hierarhija jasna.    */
.lp-steps--plain{ gap:0; }

.lp-steps--plain .lp-step + .lp-step{
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid var(--lp-line);
}

/* --- besedilo koraka ----------------------------------------------------- */

/*  Razmik med podnaslovom in odstavki, da povečan naslov ne sedi na besedilu. */
.lp-step__body > p{ margin-bottom:12px; }
.lp-step__body > p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------------------------
   POMOČ PRI REGISTRACIJI (HelpNotLogged) — dodatki
   ------------------------------------------------------------------------ */

/*  Spodnja slika (telefon) naj bo nižje od diagrama nad njo. Diagram je širok
    in plosk, telefon pokončen — brez razmika se bereta kot ena slika.       */
.lp-help-visuals__low{
  margin-top:clamp(28px,4vw,64px) !important;
}

/*  Predogled registracijskega obrazca: oznaka polja naj se ne lomi čez dve
    vrstici. "E-naslov" se je lomil v "E-" in "naslov", ker je vrstica flex z
    ozkim prostorom za besedilo.                                             */
.lp-reg-preview p{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lp-reg-preview .textOrange{
  flex:none;
  min-width:26px;
}

/*  Če bi katera oznaka bila predolga za en zaslon, naj se plošča raje
    vodoravno podrsa, kot da se besedilo odreže brez sledu.                  */
.lp-reg-preview{
  overflow-x:auto;
}
/* ===========================================================================
   POMOČ ZA OBISKOVALCE — velikost podnaslovov in številk korakov
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.pages.css.

   VZROK
   Podnaslova "Namestitev mobilne aplikacije" in "Kje najdem QR kodo?" sta
   razred .textGreenTitle, ki ima v tej datoteki velikost 1.2rem. Na tem
   portalu je html{font-size} zmanjšan, zato je 1.2rem okoli 12px — manj kot
   besedilo pod njim. Zato so vrednosti spodaj v PIKSLIH.

   Poleg tega so odstranjene številke korakov — glej blok "koraki brez
   številk" spodaj.

   HIERARHIJA, ki jo s tem dobimo:
     h1 (naslov strani)      40px   — največji
     .textGreenTitle         24px   — vmes
     besedilo                15.5px — najmanjši

   ZAKAJ TUDI h1 V PIKSLIH
   .lp-split h1 ima clamp(2rem, 3.6vw, 2.7rem). Zgornja meja je v rem, zato
   je pri zmanjšanem html{font-size} okoli 27px — in clamp() naslov omeji
   prav na to, ne glede na širino okna. Podnaslov pri 26px je bil zato skoraj
   enako velik. Dokler so v teh datotekah rem vrednosti, je vsak razmik med
   ravnmi hierarhije stvar naključja.
   =========================================================================== */


/* --- naslov strani ------------------------------------------------------- */

.ef-lp.lp-split h1{
  font-size:40px !important;          /* prej clamp(2rem,3.6vw,2.7rem) */
  line-height:1.15;
  letter-spacing:-.02em;
}

@media (max-width:767px){
  .ef-lp.lp-split h1{ font-size:30px !important; }
}

/* --- podnaslova ---------------------------------------------------------- */

.ef-lp .textGreenTitle{
  display:block;
  font-size:24px !important;          /* prej 1.2rem */
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--lp-ink);
  margin:0 0 14px;
}

@media (max-width:575px){
  .ef-lp .textGreenTitle{ font-size:20px !important; }
}

/* --- koraki brez številk -------------------------------------------------- */

/*  .lp-step iz efollowr.pages.css predvideva dva stolpca: 56px za številko in
    preostanek za besedilo. Ko številke ni, bi prvi stolpec ostal prazen in
    besedilo bi bilo zamaknjeno za 74px v desno. Zato mrežo tu zložimo v en
    stolpec — modifikator, da ostanejo številke na drugih straneh pomoči
    (SearchQR, HelpNotLogged) nedotaknjene.                                  */

.lp-steps--plain .lp-step{
  display:block;
  grid-template-columns:none;
  gap:0;
}

.lp-steps--plain .lp-step__n{ display:none; }

/*  Brez številk koraka nista več vidno ločena, zato ju loči črta. Razmik je
    večji od razmika med odstavki znotraj koraka, da je hierarhija jasna.    */
.lp-steps--plain{ gap:0; }

.lp-steps--plain .lp-step + .lp-step{
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid var(--lp-line);
}

/* --- besedilo koraka ----------------------------------------------------- */

/*  Razmik med podnaslovom in odstavki, da povečan naslov ne sedi na besedilu. */
.lp-step__body > p{ margin-bottom:12px; }
.lp-step__body > p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------------------------
   POMOČ PRI REGISTRACIJI (HelpNotLogged) — dodatki
   ------------------------------------------------------------------------ */

/*  Spodnja slika (telefon) naj bo nižje od diagrama nad njo. Diagram je širok
    in plosk, telefon pokončen — brez razmika se bereta kot ena slika.       */
.lp-help-visuals__low{
  margin-top:clamp(28px,4vw,64px) !important;
}

/*  Predogled registracijskega obrazca: oznaka polja naj se ne lomi čez dve
    vrstici. "E-naslov" se je lomil v "E-" in "naslov", ker je vrstica flex z
    ozkim prostorom za besedilo.                                             */
.lp-reg-preview p{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lp-reg-preview .textOrange{
  flex:none;
  min-width:26px;
}

/*  Če bi katera oznaka bila predolga za en zaslon, naj se plošča raje
    vodoravno podrsa, kot da se besedilo odreže brez sledu.                  */
.lp-reg-preview{
  overflow-x:auto;
}

/* ---------------------------------------------------------------------------
   PROMOCIJSKA PLOŠČA — slika telefona
   ---------------------------------------------------------------------------
   .lp-promo__art ima v efollowr.pages.css razmerje 16/11 in object-fit:cover.
   Slika telefona je pokončna, zato jo cover napolni v ležečo škatlo in odreže
   vrh in dno, obenem pa sega pod okrasni krog, ki ga riše .lp-promo::after.

   Zdaj se prikaže cela (contain), škatla se ravna po njej, omejena pa je z
   max-height, da ne prevlada nad besedilom nad njo.
   ------------------------------------------------------------------------ */

.lp-promo__art{
  aspect-ratio:auto;
  max-height:320px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
}

.lp-promo__art img{
  width:auto;
  max-width:100%;
  max-height:292px;                   /* 320 manj obojestranski padding */
  height:auto;
  object-fit:contain;
  margin:0 auto;
}

/*  Okrasni krog naj ostane za sliko in ne čez njo. */
.lp-promo::after{ z-index:0; }
.lp-promo > *{ position:relative; z-index:1; }

@media (max-width:575px){
  .lp-promo__art{ max-height:240px; }
  .lp-promo__art img{ max-height:212px; }
}

/* ===========================================================================
   REGISTRACIJA — DVA STOLPCA (Account/Register)
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.pages.css.
   Barve, pisave, polja in gumbi ostanejo isti — spremeni se samo postavitev.

   Velja le, kadar ima ovoj razred .lp-split--reg, zato Prijava, Iskanje QR
   in Pomoč ostanejo nespremenjene.

   ŠIRINE
     ≥ 1200px  obrazec (dva stolpca polj) levo, temna plošča desno
     992–1199  obrazec čez celo širino, plošča pod njim
     768–991   polja še vedno v dveh stolpcih, pari (geslo/ponovitev …) eden pod drugim
     < 768     vse v enem stolpcu, kot doslej
   =========================================================================== */

/* --- širši ovoj, da obrazec v dveh stolpcih ni stisnjen ------------------ */

@media (min-width:1200px) {
    .lp-split--reg .lp-split__grid {
        max-width: 1480px;
        grid-template-columns: minmax(0,1.75fr) minmax(0,.8fr);
    }
}

/*  Med 992 in 1199px bi obrazec ob plošči dobil premalo prostora za dva
    stolpca — plošča gre zato pod obrazec in ni več "lepljiva". */
@media (min-width:992px) and (max-width:1199px) {
    .lp-split--reg .lp-split__grid {
        grid-template-columns: minmax(0,1fr);
    }

    .lp-split--reg .lp-promo {
        position: relative;
        top: auto;
    }
}

/* --- dva stolpca polj ----------------------------------------------------- */

.lp-reg-cols {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 0 clamp(28px,3.2vw,48px);
    align-items: start;
}

@media (min-width:768px) {
    .lp-reg-cols {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

.lp-reg-col {
    min-width: 0;
}

    /*  Zadnje polje v stolpcu brez spodnjega odmika ni zaželeno — sicer naslov
    "Potrditev" pod stolpcema sede preblizu. */
    .lp-reg-col .lp-field:last-child {
        margin-bottom: 0;
    }

/*  V enem stolpcu (< 768px) je naslov desnega stolpca :first-child in je zato
    izgubil črto in odmik nad sabo. Vrnemo ju, da se razdelka ne zlijeta. */
@media (max-width:767px) {
    .lp-reg-col + .lp-reg-col > .lp-fieldset-title:first-child {
        margin-top: 26px;
        padding-top: 20px;
        border-top: 1px solid var(--lp-line);
    }
}

/*  Pari polj (geslo/ponovitev, pošta/kraj, telefon/davčna, država/zastopnik)
    so v ozkem stolpcu pretesni — med 768 in 991px gredo eden pod drugega. */
@media (min-width:768px) and (max-width:991px) {
    .lp-reg-col .lp-inline-2 {
        grid-template-columns: minmax(0,1fr);
        row-gap: 18px;
    }
    /* enak razmik kot med ostalimi polji (18px), ne 32 in 0 */
    .lp-reg-col > .lp-inline-2 {
        margin-bottom: 18px;
    }

        .lp-reg-col > .lp-inline-2 > .lp-field {
            margin-bottom: 0;
        }
}

/* --- potrditev: levo koda, desno pogoji in gumb --------------------------- */

.lp-reg-confirm {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 0 clamp(28px,3.2vw,48px);
}

@media (min-width:768px) {
    .lp-reg-confirm {
        grid-template-columns: repeat(2,minmax(0,1fr));
        align-items: end; /* gumb v višini spodnjega roba kode */
    }
}

.lp-reg-confirm > div {
    min-width: 0;
}

@media (min-width:768px) {
    .lp-reg-confirm__send .lp-check {
        margin-top: 0;
    }
}