/* WAPP07: application form in 4 short steps, with picture guides for the ID photos */
.ap-prog{margin:4px 0 6px}
.ap-prog-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
.ap-prog-name{font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:700}
.ap-prog-count{font-size:.8rem;color:var(--muted);white-space:nowrap}
.ap-prog-bar{height:4px;border-radius:4px;background:var(--bg2);overflow:hidden}
.ap-prog-bar i{display:block;height:100%;width:25%;border-radius:4px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--orange));transition:width .35s ease}
.ap-step[hidden]{display:none}
.ap-step{animation:apIn .3s ease}
@keyframes apIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ap-lead{font-size:.9rem;color:var(--muted);margin:14px 0 4px}
.ap-safe{font-size:.8rem;color:var(--muted);margin-top:12px}

/* photo boxes: the whole box is the button; same dashed border as the original file fields */
.apply-card label.ap-tile{display:flex;align-items:center;gap:14px;margin:12px 0 0;padding:12px 14px;cursor:pointer;
  background:#fff;border:1px dashed var(--line);border-radius:12px;font-weight:400;position:relative;
  transition:border-color .2s,background .2s}
.apply-card label.ap-tile:hover,.ap-tile:focus-within{border-color:var(--blue)}
.ap-tile input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;padding:0;border:0}
.ap-art{flex:0 0 112px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:8px;
  background:var(--bg);overflow:hidden;position:relative}
.ap-art svg{width:96px;height:62px;fill:none;stroke:var(--icon);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-art svg .ap-thin{stroke-width:1.2;opacity:.7}
.ap-art .ap-svgtxt{fill:var(--icon);stroke:none;font:700 7.5px 'Segoe UI',system-ui,sans-serif;letter-spacing:1px}
.ap-art .ap-svgnum{fill:var(--icon);stroke:none;font:600 10px 'Segoe UI',system-ui,sans-serif;letter-spacing:1.5px;opacity:.75}
.ap-art img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ap-txt b{font-size:.92rem;color:var(--txt);font-weight:600}
.ap-txt b em{color:var(--orange2);font-style:normal}
.ap-txt small{font-size:.8rem;color:var(--muted);line-height:1.35}
.ap-txt .ap-file{display:none;color:var(--blue);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-ok{flex:0 0 26px;height:26px;border-radius:50%;display:none;align-items:center;justify-content:center}
.ap-ok svg{width:16px;height:16px;fill:none;stroke:transparent;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ap-tile-sm .ap-art{flex-basis:64px;height:64px}
.ap-tile-sm .ap-art svg{width:44px;height:44px}

/* photo chosen: the picture replaces the drawing and the circle turns into a check */
.apply-card label.ap-tile.done{border-color:var(--blue);background:rgba(31,111,194,.04)}
.ap-tile.done .ap-art.has-img svg{display:none}
.ap-tile.done .ap-art.has-img img{display:block}
.ap-tile.done .ap-file{display:block}
.ap-tile.done .ap-ok{display:flex;background:var(--blue)}
.ap-tile.done .ap-ok svg{stroke:#fff}
.apply-card label.ap-tile.miss{border-color:#c0392b}

/* step buttons */
.ap-nav{display:flex;gap:12px;margin-top:18px}
.ap-nav button{flex:1;padding:13px;border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer;font-family:inherit}
.ap-back{background:transparent;border:1.5px solid var(--blue);color:var(--blue)}
.ap-back:hover{background:rgba(31,111,194,.06)}
.ap-next{background:linear-gradient(90deg,var(--blue),var(--cyan));border:none;color:#fff}
.ap-nav .ap-hide{display:none}
@media(max-width:560px){.apply-card label.ap-tile{gap:12px;padding:10px 12px}.ap-art{flex-basis:88px;height:60px}.ap-art svg{width:78px;height:50px}}
/* WAPP08: bank fields */
#apBank[hidden]{display:none}
.ap-art .ap-svgvoid{fill:none;stroke:var(--icon);stroke-width:1;font:800 15px 'Segoe UI',system-ui,sans-serif;letter-spacing:3px;opacity:.8}
.ap-field-note{display:block;font-size:.78rem;margin-top:4px;min-height:1em;color:var(--muted)}
.ap-field-note.good{color:var(--blue)}
.ap-field-note.bad{color:#c0392b}
.apply-card input.ap-good{border-color:var(--blue)}
.apply-card input.ap-bad{border-color:#c0392b}
/* WAPP10: skills as tappable chips (same look as the service tags) */
.ap-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.apply-card label.ap-chip{display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 13px;border:1px solid var(--line);border-radius:20px;
  background:#fff;color:var(--txt);font-size:.85rem;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s,color .2s;user-select:none}
.apply-card .ap-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ap-chip span::before{content:'';display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-1px;border:1.5px solid var(--icon);border-radius:3px;transition:all .2s}
.apply-card label.ap-chip:hover{border-color:var(--blue)}
.apply-card label.ap-chip:has(input:checked){background:rgba(31,111,194,.07);border-color:var(--blue);color:var(--blue)}
.ap-chip input:checked+span::before{background:var(--blue);border-color:var(--blue);box-shadow:inset 0 0 0 2px #fff}
.ap-chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}