/* ===== Register — Agency + izbor tipa naloga (Sprint 1) ===== */

/* Blok grešaka sa servera (Laravel $errors) */
.form-errors{background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.32);border-left:3px solid var(--red);
  border-radius:0 12px 12px 0;padding:13px 16px;margin-bottom:20px}
.form-errors ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.form-errors li{position:relative;padding-left:16px;font-size:.85rem;font-weight:600;color:var(--red);line-height:1.5}
.form-errors li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--red)}

/* Register — Agency: isti vizard kao register-company, samo 3 koraka */
.pg-register-agency{padding-top:var(--hh)}
.pg-register-agency .inp input{flex:1;min-width:0;border:0;background:none;outline:0;font-family:var(--h);font-size:.95rem;color:var(--navy);padding:12px 14px}
.pg-register-agency .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.pg-register-agency .wz-prog{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-register-agency .wz-track{left:16.667%;right:16.667%}
/* nova foto (jb-register-agency.webp) — rukovanje je u donjoj polovini kadra */
.pg-register-agency .rc-vis .ph{object-position:52% 60%}

/* Register — izbor tipa naloga */
.pg-register-choose{padding-top:var(--hh)}
.pg-register-choose .area-grid{grid-template-columns:repeat(3,1fr)}
.pg-register-choose .area{padding-bottom:20px}
.pg-register-choose .area .af{display:flex;padding-top:16px}
.pg-register-choose .area .af .ctab{width:100%;justify-content:center;font-size:.9rem;padding:12px 18px}
.rc-signin{margin-top:34px;text-align:center;font-size:.95rem;color:var(--fg-2)}
.rc-signin a{font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.rc-signin a:hover{color:var(--gold-d)}
@media(max-width:1080px){
.pg-register-choose .area-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.pg-register-choose .area-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Register pages — fokus, pozadina, kompaktan „jedan ekran" layout
   (dodato 2026-08-10; vlasnik ovog fajla drži sve tri register strane + izbor)
   ========================================================================== */

/* --- 1. PLAVI FOKUS OUTLINE — root cause ---------------------------------
   @tailwindcss/forms iz Vite build-a (public/build/assets/app-*.css, ubačen
   preko @vite u layout-u) na SVAKI native form kontrol stavlja:
       :focus{ --tw-ring-color:#2563eb; box-shadow:<ring>; border-color:#2563eb }
   Selektori su [type=text]:focus, select:focus, textarea:focus, [type=checkbox]:focus …
   → specifičnost (0,2,0). Zato ga ovde gasimo sa (0,2,1) na jednom mestu,
   umesto polje po polje. Zlatni prsten sa `.inp:focus-within` ostaje netaknut. */
:is(.pg-register-candidate,.pg-register-company,.pg-register-agency,.pg-register-choose)
  :is(input,select,textarea,button):focus{
  outline:2px solid transparent;outline-offset:0;
  border-color:transparent;box-shadow:none;
  --tw-ring-color:transparent;--tw-ring-offset-color:transparent;
  --tw-ring-shadow:0 0 #0000;--tw-ring-offset-shadow:0 0 #0000
}
/* .inp shell nosi vidljivo zlatno stanje (border + prsten) — nije ga tangirao gornji reset */
:is(.pg-register-candidate,.pg-register-company,.pg-register-agency,.pg-register-choose)
  .inp:focus-within{background:#fff;border-color:var(--gold);box-shadow:0 0 0 4px rgba(242,176,30,.16)}

/* Pristupačnost: kontrole KOJE NISU u .inp školjci (dugmad, file, chip/tag/seg,
   linkovi u formi) dobijaju svoj zlatni focus-visible prsten — nikad goli outline:none. */
:is(.pg-register-candidate,.pg-register-company,.pg-register-agency,.pg-register-choose)
  :is(button,a,.chip,.tag,.drop,input[type=file],summary):focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:inherit
}
/* input/select/textarea van .inp školjke (npr. slobodan unos u „Drugo") */
:is(.pg-register-candidate,.pg-register-company,.pg-register-agency,.pg-register-choose)
  :is(input,select,textarea):not(.inp *):focus-visible{
  outline:2px solid var(--gold);outline-offset:2px
}
/* Tastaturni fokus unutar .inp — prsten školjke pojačan, bez pomeranja geometrije */
:is(.pg-register-candidate,.pg-register-company,.pg-register-agency,.pg-register-choose)
  .inp:has(:focus-visible){box-shadow:0 0 0 4px rgba(242,176,30,.34)}

/* --- 2. SIVA POZADINA ISPOD FORME ---------------------------------------
   .rc-form je u jobela.css `background:var(--bg)` (#F2F4F7) — siva traka desno
   od navy kolone. Levo je bela (body je beo u Breeze resetu) → izjednačavamo. */
:is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-form{background:var(--card)}

/* --- 3. KOMPAKTAN LAYOUT: sve u jednom ekranu na ≥1200px ----------------- */
@media(min-width:1200px){
  /* align-items:stretch (umesto start iz jobela.css) — bez toga desna kolona ne
     dobija punu visinu reda, pa kartica ne može da se centrira po ekranu.
     .rc-vis zadržava svoj align-self:start i ostaje sticky. */
  /* NB: kod agencije su .rc i .pg-register-agency ISTI element (<main class="rc pg-register-agency">),
     kod kandidata/firme je .pg-* roditelj — zato oba oblika selektora. */
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc,
  .pg-register-agency.rc{
    min-height:calc(100vh - var(--hh));align-items:stretch}

  /* leva kolona — manja foto traka, zbijeniji tekst */
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-vis{
    --band:clamp(150px,22vh,268px);
    min-height:calc(100vh - var(--hh) - 26px);margin:13px 0 13px 13px;border-radius:22px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-vis-in{
    max-width:540px;padding:calc(var(--band) + 14px) clamp(20px,2.5vw,38px) clamp(18px,2vw,28px)}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .eyebrow{margin-bottom:9px;font-size:.72rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-vis h1{
    font-size:clamp(1.55rem,2.25vw,2.15rem);line-height:1.12}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-vis .lead{
    font-size:.93rem;line-height:1.55;margin-top:9px;max-width:48ch}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-pts{margin-top:15px;gap:9px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-pts li{font-size:.88rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-pts li .ck{width:22px;height:22px;border-radius:7px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-pts li .ck svg{width:11px;height:11px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-pts li b{font-size:.9rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-pts li span{font-size:.79rem;line-height:1.45;margin-top:1px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-trust{margin-top:15px;padding-top:13px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-trust .tr b{font-size:1.2rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-trust .tr span{font-size:.72rem;margin-top:3px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-badge{font-size:.7rem;padding:6px 12px 6px 9px;top:13px;right:13px}

  /* desna kolona — kartica centrirana u ekranu, gušći ritam polja */
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-form{
    display:flex;align-items:center;justify-content:center;padding:13px clamp(16px,2.2vw,34px)}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-card{
    width:100%;max-width:640px;padding:20px clamp(20px,1.9vw,26px) 22px;border-radius:20px;
    /* kartica nikad ne prelazi visinu ekrana: zaglavlje (naslov + progres) i
       navigacija ostaju fiksni, a samo polja aktivnog koraka skroluju iznutra.
       Bez ovoga „viri" 600+ px na dugim koracima (Experience, Documents). */
    max-height:calc(100vh - var(--hh) - 26px);display:flex;flex-direction:column}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) :is(.rc-card>.hd,.wz-prog,.form-errors){flex:none}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) #wzForm{
    display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-step.on{
    flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    padding-right:8px;margin-right:-8px;scrollbar-width:thin;scrollbar-color:var(--bg-3) transparent;
    /* scroll-shadow: senka na ivici se pojavi samo dok ima još sadržaja u tom smeru */
    background:
      linear-gradient(var(--card) 30%,rgba(255,255,255,0)) top/100% 22px no-repeat local,
      linear-gradient(rgba(255,255,255,0),var(--card) 70%) bottom/100% 22px no-repeat local,
      radial-gradient(farthest-side at 50% 0,rgba(10,29,58,.13),transparent) top/100% 10px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%,rgba(10,29,58,.13),transparent) bottom/100% 10px no-repeat scroll}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-step.on::-webkit-scrollbar{width:6px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-step.on::-webkit-scrollbar-thumb{
    background:var(--bg-3);border-radius:6px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) :is(.wz-nav,.wz-note,.wz-done){flex:none}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-card>.hd{margin-bottom:14px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-card>.hd h2{font-size:1.26rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .rc-card>.hd p{font-size:.83rem;line-height:1.45;margin-top:3px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-prog{margin-bottom:16px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-p{gap:6px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-p .n{width:30px;height:30px;font-size:.8rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-p .t{font-size:.71rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-track{top:14px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-step .sh{font-size:1.02rem;margin-bottom:2px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-step .sp{font-size:.81rem;line-height:1.4;margin-bottom:12px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-body{gap:11px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .two{gap:12px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .fld>.fl{margin-bottom:5px;font-size:.8rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .inp{border-radius:12px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) :is(.inp input,.inp select,.inp textarea){
    padding:9px 13px;font-size:.9rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .inp select{padding-right:32px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .inp textarea{min-height:56px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .chips{gap:8px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .chip{padding:9px 12px;font-size:.83rem;border-radius:12px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .chip>svg{width:18px;height:18px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) :is(.tag,.sg span){padding:7px 14px;font-size:.81rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .drop{padding:16px 14px;gap:5px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .drop .di{width:34px;height:34px;border-radius:11px;margin-bottom:2px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .drop .di svg{width:17px;height:17px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-nav{margin-top:15px;padding-top:13px}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-nav .ctab{padding:10px 22px;font-size:.9rem}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .wz-note{margin-top:9px;font-size:.74rem;line-height:1.42}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .chk{font-size:.83rem;line-height:1.45}
  :is(.pg-register-candidate,.pg-register-company,.pg-register-agency) .cond{margin-top:10px}

  /* izbor tipa naloga — takođe jedan ekran (bez praznog hoda: samo zbijeni razmaci) */
  .pg-register-choose .phead{padding:clamp(34px,4vw,54px) 0 clamp(30px,3.4vw,44px)}
  .pg-register-choose .phead h1{font-size:clamp(1.9rem,3.2vw,2.7rem)}
  .pg-register-choose .phead .lead{margin-top:12px;font-size:1rem;line-height:1.6}
  .pg-register-choose .sec{padding:clamp(26px,3vw,40px) 0}
  .pg-register-choose .area{padding-bottom:16px}
  .pg-register-choose .rc-signin{margin-top:22px}

  /* --- 4. REGISTER — COMPANY: bez skrola U kartici (Ivan, 14.08.2026) -------
     Gornji „jedan ekran" blok drži karticu na max-height i pušta .wz-step da
     skroluje iznutra. Na registraciji firme to je skrol-u-skrolu — gasi se:
     kartica raste koliko treba, a ako korak ne stane, skroluje CELA strana.
     Da bi ipak stao, sadržaj koraka je zbijen (dole). Kandidat i agencija
     ostaju netaknuti — sve je scope-ovano na .pg-register-company. */
  .pg-register-company .rc-card{max-height:none;display:block}
  .pg-register-company #wzForm{display:block}
  .pg-register-company .wz-step.on{
    overflow:visible;background:none;padding-right:0;margin-right:0}

  /* zbijanje koraka — cilj je da svaki od 4 koraka stane bez skrola */
  .pg-register-company .rc-card>.hd{margin-bottom:12px}
  .pg-register-company .wz-prog{margin-bottom:14px}
  .pg-register-company .wz-step .sp{margin-bottom:10px}
  .pg-register-company .wz-body{gap:10px}
  .pg-register-company .inp textarea{min-height:50px}
  .pg-register-company .wz-nav{margin-top:13px;padding-top:11px}
  /* „Roles you hire for": 9 čipova u grid-u 2 kolone = 5 redova. Flex-wrap ih
     pakuje po stvarnoj širini teksta → 3 reda, bez prelamanja natpisa.
     padding-right 26px pravi mesto za .mk kvačicu (position:absolute right:8px). */
  .pg-register-company .chips{display:flex;flex-wrap:wrap;gap:7px}
  .pg-register-company .chip{padding:8px 24px 8px 10px;gap:7px;font-size:.81rem;border-radius:12px}
  .pg-register-company .chip>svg{width:17px;height:17px}
}