/* iOS-like bottom card (kao na slici) */

#fkCityModal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
#fkCityModal.open{ display:block; }

#fkCityBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* "Close" gore desno (kao na slici) */
#fkCityModal .fkTopClose{
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 14px;
  z-index: 1000001;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
#fkCityModal .fkTopClose:active{ transform: scale(.98); }

/* Bottom card */
#fkCityCard{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  background: #fff;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 60px rgba(0,0,0,.22);
  overflow: hidden;

  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform .24s ease;
}
#fkCityModal.open #fkCityCard{ transform: translateY(0); }

/* Header u kartici */
#fkCityHead{
  padding: 18px 18px 10px 18px;
  text-align: center;
}
#fkCityTitle{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #111;
}
#fkCitySub{
  margin: 6px 0 0 0;
  font-size: 13px;
  color: rgba(0,0,0,.55);
  font-weight: 700;
}

/* List container */
#fkCityList{
  padding: 10px 14px 12px 14px;
  max-height: 56vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* iOS "cell" style dugmad */
.fkCityBtn,
.fkCityBtn.secondary{
  width: 100%;
  border: 0;
  background: #f2f2f7;
  color: #111;

  border-radius: 16px;
  padding: 14px 14px;
  margin-bottom: 10px;

  font-size: 16px;
  font-weight: 900;

  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* mala kružna indikacija desno (kao radio) */
.fkCityBtn::after,
.fkCityBtn.secondary::after{
  content:"";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
  background: transparent;
}

/* aktivni grad (dodaj klasu .is-active na dugme kroz JS) */
.fkCityBtn.is-active::after,
.fkCityBtn.secondary.is-active::after{
  background: #f37321;
  border-color: #f37321;
}

/* Donje "Done" dugme */
#fkCityCloseRow{
  padding: 6px 14px 0 14px;
}
#fkCityClose{
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 14px 14px;
  font-size: 16px;
  font-weight: 900;

  background: #f37321;
  color: #fff;

  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
#fkCityClose:active{ transform: scale(.99); }

.fkCityLoading{
  padding: 14px 0;
  text-align: center;
  color: rgba(0,0,0,.55);
  font-weight: 800;
}


#fkCityHead{ position: relative; }

#fkCityX{
  position:absolute;
  right: 12px;
  top: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  font-weight: 900;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
#fkCityX:active{ transform: scale(.98); }


/* Grad dugme (wrapper) */
#cityLabelWrap{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 10px;
  border-radius: 12px;

  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;

  transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
}

/* pressed (iOS tap) */
#cityLabelWrap:active{
  transform: scale(.98);
  background: rgba(0,0,0,.06);
}
#cityLabelWrap.is-pressed{
  transform: scale(.98);
  background: rgba(0,0,0,.06);
}


/* ===== moderniji izgled (okt 2026) ===== */
#fkCityCard{background:#fbf8f5;max-width:560px;margin:0 auto}
#fkCityHead{padding:22px 18px 6px}
#fkCityHead .fk-login-top{display:flex;justify-content:center}
#fkCityHead .fk-logo{width:58px !important;height:58px;border-radius:50%;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,.12)}
#fkCityTitle{font-size:21px;margin-top:10px}
#fkCitySub{font-size:13.5px;font-weight:600;color:#8a8079}
#fkCityList{padding:12px 16px 8px}
.fkCityBtn,.fkCityBtn.secondary{position:relative;justify-content:flex-start;gap:12px;background:#fff;border:2px solid #eee6df;box-shadow:0 2px 10px rgba(0,0,0,.04);padding:12px 14px;font-family:inherit;text-align:left;transition:border-color .15s,background .15s,transform .1s}
.fkCityBtn:active{transform:scale(.985)}
.fkCityIc{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#fff3ea;display:flex;align-items:center;justify-content:center;font-style:normal}
.fkCityIc svg{width:21px;height:21px;fill:none;stroke:#f37321;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fkCityName{flex:1;font-size:16.5px;font-weight:900;color:#1f1a17;line-height:1.2}
.fkCityName small{display:block;font-size:12.5px;font-weight:700;color:#d35f12;margin-top:2px}
.fkCityBtn::after,.fkCityBtn.secondary::after{width:22px;height:22px;flex:0 0 22px;box-sizing:border-box}
.fkCityBtn.is-active{border-color:#f37321;background:#fff7f1;box-shadow:0 6px 16px rgba(243,115,33,.16)}
.fkCityBtn.is-active .fkCityIc{background:#f37321}.fkCityBtn.is-active .fkCityIc svg{stroke:#fff}
.fkCityBtn.is-active::after{content:"✓";color:#fff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;background:#f37321;border-color:#f37321}
.fkCityBtn.is-loading{opacity:.8}