/* CityBus jobs application page — light theme matching citybus.ge /
   "Where is my bus?" widget: white cards on a #f6f6f6 field, CityBus
   navy #00458a for structure, bright blue #0094d7 for anything tappable,
   teal #3fd2c7 for success, red #e75747 for errors. */

@font-face{
  font-family:'FiraGO';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/firago-medium.woff2') format('woff2');
}
@font-face{
  font-family:'FiraGO';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/firago-bold.woff2') format('woff2');
}

:root{
  --navy:#00458a;
  --blue:#0094d7;
  --teal:#3fd2c7;
  --red:#e75747;
  --ink:#2d3745;
  --mut:#696969;
  --line:#e3e7ec;
  --field:#f6f6f6;
  --pale:#d6f1ff;
  --card:#ffffff;
  --amber:#c98a1f;
  --ka:'FiraGO','Noto Sans Georgian',sans-serif;
  --en:'FiraGO','Barlow',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--field);
  color:var(--ink);
  font-family:var(--ka);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.hd{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
}
.hd-logo{height:28px;width:auto}
.hd-title{font-weight:700;font-size:15px;color:var(--navy)}

.wrap{flex:1;display:flex;flex-direction:column;max-width:640px;margin:0 auto;width:100%}
.screen{flex:1;display:flex;flex-direction:column}
.screen[hidden]{display:none}

/* ---- STEP 0: vacancy list ---- */
.intro{padding:28px 20px 12px}
.intro h1{font-size:24px;font-weight:800;margin:0 0 8px;line-height:1.3;color:var(--navy)}
.intro h1 .accent{color:var(--blue)}
.intro .sub{color:var(--mut);font-size:14px;margin:0;line-height:1.5}

.vac-list{padding:8px 16px 32px;display:flex;flex-direction:column;gap:10px}
.vac-loading, .vac-empty{color:var(--mut);text-align:center;padding:40px 20px;font-size:14px}

.vac-card{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  border-radius:8px;
  padding:16px 18px;
  cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s;
  text-align:left;
}
.vac-card:hover, .vac-card:active{border-color:var(--blue);background:var(--pale)}
.vac-card-name{font-weight:700;font-size:16px;margin-bottom:4px;color:var(--ink)}
.vac-card-loc{color:var(--mut);font-size:13px;margin-bottom:8px}
.vac-card-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px}
.vac-chip{
  background:var(--field);
  border:1px solid var(--line);
  border-radius:20px;
  padding:3px 10px;
  color:var(--mut);
}
.vac-chip.deadline{color:var(--amber);border-color:var(--amber)}

/* ---- STEP 1: chat ---- */
.chat-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:var(--card);
  position:sticky;top:56px;z-index:9;
}
.back-btn{
  background:var(--field);border:1px solid var(--line);color:var(--ink);
  width:36px;height:36px;border-radius:8px;font-size:16px;cursor:pointer;flex:none;
}
.chat-vac-name{font-weight:700;font-size:15px;color:var(--navy)}
.chat-vac-loc{color:var(--mut);font-size:12px}

.chat-log{
  flex:1;
  padding:20px 16px 10px;
  display:flex;flex-direction:column;gap:12px;
  overflow-y:auto;
  background:var(--field);
}
.msg{
  max-width:80%;
  padding:11px 15px;
  border-radius:16px;
  font-size:14.5px;
  line-height:1.45;
  animation:msgIn .25s ease;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.bot{
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink);
  align-self:flex-start;
  border-bottom-left-radius:4px;
}
.msg.user{
  background:var(--navy);
  color:#fff;
  align-self:flex-end;
  border-bottom-right-radius:4px;
}
.msg.error{
  background:#fdeceb;
  border:1px solid var(--red);
  color:var(--red);
  align-self:flex-start;
  font-size:13px;
}

.chat-input-bar{
  padding:12px 16px 20px;
  border-top:1px solid var(--line);
  background:var(--card);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-input-row{display:flex;gap:8px}
.chat-input-row input, .chat-input-row textarea{
  flex:1;
  background:var(--field);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:8px;
  padding:12px 14px;
  font-size:15px;
  font-family:var(--ka);
  outline:none;
}
.chat-input-row input:focus, .chat-input-row textarea:focus{border-color:var(--blue)}
.chat-input-row textarea{resize:none;min-height:44px;max-height:120px}
.send-btn{
  background:var(--blue);
  color:#fff;border:none;border-radius:8px;
  width:44px;height:44px;flex:none;
  font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.send-btn:disabled{opacity:.4;cursor:default}

.choice-row{display:flex;flex-wrap:wrap;gap:8px}
.choice-btn{
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:20px;
  padding:9px 16px;
  font-size:13.5px;
  cursor:pointer;
  font-family:var(--ka);
}
.choice-btn:hover{border-color:var(--blue);background:var(--pale)}
.choice-btn.consent-yes{background:var(--teal);border-color:var(--teal);color:#04352f;font-weight:700}
.choice-btn.consent-no{background:transparent;color:var(--mut)}

.skip-btn{
  align-self:flex-start;
  background:none;border:none;color:var(--mut);
  font-size:12.5px;text-decoration:underline;cursor:pointer;padding:2px 0;
}

/* ---- STEP 2: done ---- */
.done-card{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 24px;
  background:var(--field);
}
.done-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--teal);color:#04352f;
  font-size:28px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.done-card h2{font-size:20px;margin:0 0 10px;color:var(--navy)}
.done-card p{color:var(--mut);font-size:14px;line-height:1.6;margin:0 0 26px;max-width:360px}

.btn-primary{
  background:var(--blue);color:#fff;border:none;
  border-radius:8px;padding:13px 26px;font-size:14.5px;font-weight:700;
  cursor:pointer;font-family:var(--ka);
}

@media (min-width:520px){
  .intro h1{font-size:28px}
}