/* robotatut.pl - wybor zawodu (szukaj albo przewijaj) */
.spx{position:relative;display:block}

.spx-b{
  width:100%;display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:12px 12px;text-align:left;
  background:var(--card);color:var(--ink);
  border:1.5px solid var(--line);
  font-family:inherit;font-size:14.5px;line-height:1.2}
.spx-b:hover{border-color:var(--gline,var(--line))}
.spx-b > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spx-b svg{flex:0 0 18px;width:18px;height:18px;fill:var(--ink2)}
.spx-b[aria-expanded="true"]{border-color:var(--yl)}

.spx-pop{
  position:absolute;z-index:900;left:0;right:0;top:calc(100% + 5px);
  display:flex;flex-direction:column;max-height:min(64vh,430px);
  background:var(--card);border:1.5px solid var(--gline,var(--line));
  box-shadow:0 18px 46px rgba(0,0,0,.30)}

.spx-top{display:flex;align-items:center;gap:8px;padding:9px 10px;
  border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0}
.spx-mag{flex:0 0 17px;width:17px;height:17px;fill:var(--ink2)}
.spx-q{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);
  font-family:inherit;font-size:15px;padding:5px 0;-webkit-appearance:none}
.spx-q::placeholder{color:var(--ink2)}
.spx-close{flex:0 0 auto;border:0;background:none;cursor:pointer;color:var(--ink2);
  font-size:23px;line-height:1;padding:2px 4px 5px}

.spx-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;padding-bottom:4px}

.spx-gt{position:sticky;top:0;padding:9px 12px 6px;
  font-family:var(--f-display,inherit);font-weight:800;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);
  background:var(--card)}

.spx-i{display:block;width:100%;text-align:left;border:0;cursor:pointer;
  background:none;color:var(--ink);font-family:inherit;
  padding:10px 12px;line-height:1.25;border-top:1px solid var(--line)}
.spx-i:first-child{border-top:0}
.spx-i:hover,.spx-i.hl{background:var(--gsoft,rgba(0,0,0,.05))}
.spx-i.on{background:var(--gsoft,rgba(0,0,0,.05))}
.spx-i.on .spx-n{color:var(--yl)}
.spx-n{display:block;font-size:14.5px}
.spx-h{display:block;font-size:11.5px;color:var(--ink2);margin-top:1px}
.spx-all .spx-n,.spx-all{font-weight:600}

.spx-none{padding:26px 14px;text-align:center;color:var(--ink2);font-size:13.5px}

.spx-foot{padding:8px 12px;border-top:1px solid var(--line);
  font-size:10.5px;letter-spacing:.06em;color:var(--ink2);text-align:center}

@media (max-width:760px){
  .spx-pop{position:fixed;inset:0;top:0;max-height:none;height:100%;
    border:0;z-index:1300}
  .spx-top{padding:12px 12px;border-bottom:1.5px solid var(--gline,var(--line))}
  .spx-q{font-size:16px}          /* 16px = iOS nie przybliza ekranu */
  .spx-i{padding:13px 14px}
  .spx-n{font-size:15.5px}
}

/* --- nadpisanie globalnych stylow <button> w formularzach --- */
.spx .spx-b,
.spx .spx-i,
.spx .spx-close{
  background-image:none;border-radius:0;box-shadow:none;
  text-transform:none;letter-spacing:normal;font-family:inherit}
.spx .spx-b{
  background-color:var(--card);color:var(--ink);
  border:1.5px solid var(--line);width:100%;text-align:left;
  padding:12px;font-size:14.5px;font-weight:500;
  display:flex;align-items:center;gap:8px}
.spx .spx-b[aria-expanded="true"]{border-color:var(--yl)}
.spx .spx-i{
  background-color:transparent;color:var(--ink);
  width:100%;text-align:left;padding:10px 12px;
  font-size:14.5px;font-weight:400;border:0;border-top:1px solid var(--line)}
.spx .spx-i:first-child{border-top:0}
.spx .spx-i:hover,.spx .spx-i.hl,.spx .spx-i.on{background-color:var(--gsoft)}
.spx .spx-i .spx-n{font-weight:500;color:var(--ink)}
.spx .spx-i.on .spx-n{color:var(--yl);font-weight:700}
.spx .spx-close{
  background-color:transparent;color:var(--ink2);
  border:0;font-size:23px;line-height:1;padding:2px 4px 5px;width:auto}
.spx .spx-gt{font-weight:800}
@media (max-width:760px){
  .spx .spx-i{padding:13px 14px;font-size:15.5px}
}

/* Globalne style .filters button maja wyzsza specyficznosc - stad !important */
.spx .spx-b,
.spx .spx-i,
.spx .spx-close{
  background-image:none !important;
  min-height:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-transform:none !important;
  letter-spacing:normal !important}
.spx .spx-b{
  background-color:var(--card) !important;
  color:var(--ink) !important;
  border:1.5px solid var(--line) !important;
  padding:12px !important}
.spx .spx-b[aria-expanded="true"]{border-color:var(--yl) !important}
.spx .spx-i{
  background-color:transparent !important;
  color:var(--ink) !important;
  border:0 !important;
  border-top:1px solid var(--line) !important;
  padding:10px 12px !important}
.spx .spx-i:first-child{border-top:0 !important}
.spx .spx-i:hover,
.spx .spx-i.hl,
.spx .spx-i.on{background-color:var(--gsoft) !important}
.spx .spx-close{
  background-color:transparent !important;
  color:var(--ink2) !important;
  border:0 !important;
  padding:2px 6px 5px !important}
@media (max-width:760px){
  .spx .spx-i{padding:13px 14px !important}
}

/* atrybut hidden musi wygrac z display z regul globalnych */
.spx [hidden]{display:none !important}