html, body {
  height: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/*
 * Perbaikan tinggi viewport di mobile.
 * 100vh / height:100% menyertakan area di balik address bar sehingga bagian
 * bawah konten terpotong. Karena body memakai overflow:hidden (tidak scroll),
 * 100dvh justru sering dihitung sebagai viewport BESAR dan tetap terpotong.
 * 100svh (small viewport height) selalu memakai ukuran terkecil (address bar
 * tampil), sehingga konten dijamin muat penuh di area yang terlihat.
 * body.h-screen dipakai untuk mengalahkan utility Tailwind .h-screen (100vh).
 */
@supports (height: 100svh) {
  html, body { height: 100svh; }
  body.h-screen { height: 100svh; }
}

/* MAP */
.map-container {
    position: relative;
    overflow: hidden;
}

.custom-scroll {
    scrollbar-width: thin;
}

.custom-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #c4c6d0;
    border-radius: 10px;
}

/* ========================= */
/* LABEL NAMA (SAMPING MARKER) */
/* ========================= */
.label-nama {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.nama-koperasi {
  font-size: 13px;
  font-weight: 600;
  color: #202124;
}

.nama-koperasi:hover {
  transform: scale(1.05);
}

.aktif-label .nama-koperasi {
  color: #0052a4;
  font-weight: bold;
}

/* ========================= */
/* POPUP MINI */
/* ========================= */
.popup-mini {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-mini-text strong {
  font-size: 13px;
}

.popup-jenis-icon {
  font-size: 22px;
  border-radius: 50%;
  padding: 4px;
  flex-shrink: 0;
}

.leaflet-popup-tip {
  display: none;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.leaflet-routing-container {
  display: none !important;
}

/* ========================= */
/* MARKER AKTIF (BULAT BERDENYUT) */
/* ========================= */
.marker-aktif-wrapper,
.marker-user-wrapper {
  background: transparent !important;
  border: none !important;
}

.marker-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 23, 54, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 23, 54, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 23, 54, 0);
  }
}

.marker-user-wrapper .marker-pulse {
  animation-name: pulse-user;
}

@keyframes pulse-user {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(30, 144, 255, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(30, 144, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(30, 144, 255, 0);
  }
}

/* =========================
  FORM TAMBAH KOPERASI
========================= */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.popup.active {
  display: flex;
}

.popup-content {
  background: #fff;
  width: 400px;
  max-width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  position: relative;
  margin: auto;
}

.popup-content::-webkit-scrollbar {
  width: 8px;
}

#editPopup .popup-content,
#popupEditPengurus .popup-content,
#popupTambah .popup-content {
  scrollbar-width: thin;
}

#editPopup .popup-content::-webkit-scrollbar,
#popupEditPengurus .popup-content::-webkit-scrollbar,
#popupTambah .popup-content::-webkit-scrollbar {
  width: 5px;
}

.popup-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.popup-content::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 10px;
}

.popup-content::-webkit-scrollbar-thumb:hover {
  background: #888;
}

.popup-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:20px;
}

.marker-error-toast {
  display: none;
  background: #ba1a1a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  white-space: pre-line;
}

.marker-error-toast.active {
  display: block;
}

.marker-success-toast {
  display: none;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  background: #146c2e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  white-space: nowrap;
}

.marker-success-toast.active {
  display: block;
}

.popup-title {
  font-size: 20px;
  margin: 0;
}

.popup-subtitle {
  font-size: 12px;
  color: #666;
}

.close-popup{
  background:none;
  border:none;
  font-size:28px;
  cursor:pointer;
  color:#666;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.form-input,
select.form-input,
textarea.form-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  box-sizing: border-box;
}

textarea.form-input {
  min-height: 70px;
}

select.form-input {
  font-size: 12px;
  padding: 6px 8px;
}

select.form-input option {
  font-size: 12px;
}

.form-input:focus{
  border-color:#2e86de;
  box-shadow:0 0 0 4px rgba(46,134,222,.15);
}

.coordinate-row{
  display:flex;
  gap:12px;
}

.coordinate-row .form-group{
  flex:1;
}

.status-title{
  font-size:13px;
  font-weight:600;
  margin-bottom:10px;
}

.status-group{
  display:flex;
  gap:10px;
}

.status-option{
  flex:1;
  padding: 4px 8px;
  font-size: 14px;
}

.status-option input{
  display:none;
  width: 12px;
  height: 12px;
}

.status-option label{
  display:flex;
  justify-content:center;
  align-items:center;
  height:30px;
  border:2px solid #ddd;
  border-radius:30px;
  background:#fff;
  color:#555;
  cursor:pointer;
  transition:.2s;
}

.status-option input:checked + label{
  background:#f1c40f;
  color:#333;
  border-color:#f1c40f;
}

.btn-simpan-koperasi {
  width: 100%;
  margin-top: 15px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #f1c40f;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-simpan-koperasi:hover{
  background:#d4ac0d;
  transform:translateY(-2px);
}

.btn-simpan-koperasi:disabled{
  background:#fff;
  color:#aaa;
  border:2px solid #ddd;
  cursor:not-allowed;
}

.btn-simpan-koperasi:disabled:hover{
  background:#fff;
  transform:none;
}

.label-koperasi {
  background: rgba(255,255,255,0.9);
  border: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
}



/* ==========================================================
   INFO CARD KOPERASI - BOTTOM SHEET
   Muncul menyembul dari bawah dengan animasi slide (mirip sidebar
   yang meluncur masuk). Di mobile kartu memenuhi lebar layar dan
   menempel ke tepi bawah; di desktop mengambang di kiri-bawah.
   Transisi didefinisikan di sini (ID selector) supaya menang atas
   utilitas Tailwind dan hanya menganimasikan transform + opacity.
   ========================================================== */
#infoCard {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Pegangan tarik harus selalu dikendalikan JS (transform), bukan oleh
   scroll native browser. Tanpa ini, saat isi kartu (mis. rute card
   dengan daftar langkah panjang) melebihi max-h dan jadi scrollable,
   gestur tarik ke bawah pada pegangan malah ditangkap sebagai scroll
   internal sehingga kartu terasa tidak responsif / tidak bisa ditutup. */
#infoCardHandle {
  touch-action: none;
}

/* Mobile: saat "ditutup" (ditarik ke bawah), sisakan sedikit bagian
   atas (pegangan tarik) tetap terlihat sebagai isyarat bisa ditarik
   kembali ke atas. */
#infoCard.infocard-tersembunyi {
  transform: translateY(calc(100% - 34px));
  opacity: 1;
  pointer-events: auto;
}

#infoCard.infocard-menyeret {
  transition: none;
}

/* Tombol aksi peta (lokasi saya & koperasi terdekat) menempel di atas
   infocard di mobile — posisi `bottom`-nya diatur lewat JS, dianimasikan
   selaras dengan transisi infocard, dan dimatikan saat sedang ditarik. */
@media (max-width: 767.98px) {
  #aksiPetaPublik {
    transition: bottom 0.3s ease-out;
  }

  #aksiPetaPublik.infocard-menyeret {
    transition: none;
  }
}

@media (min-width: 768px) {
  /* Desktop: tetap sembunyi penuh seperti semula, tidak ada gesture tarik. */
  #infoCard.infocard-tersembunyi {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .popup-title {
    font-size: 18px;
  }

  #editPopup .popup-title {
    font-size: 16px;
  }

  #popupEditPengurus .popup-title {
    font-size: 16px;
  }

  #popupTambah .popup-title {
    font-size: 16px;
  }

  #popupLaporan .popup-title {
    font-size: 16px;
  }

  #popupGambar .popup-title {
    font-size: 16px;
  }

  .popup-content {
    padding: 14px;
    border-radius: 12px;
    max-height: 80vh;
  }

  #editPopup .popup-content,
  #popupEditPengurus .popup-content,
  #popupLaporan .popup-content,
  #popupTambah .popup-content,
  #popupGambar .popup-content {
    max-width: 80%;
  }

  .popup-header {
    margin-bottom: 14px;
  }

  .form-group {
    margin-bottom: 8px;
  }

  #editPopup .form-group label {
    font-size: 13px;
  }

  #popupTambah .form-group label {
    font-size: 13px;
  }

  #popupGambar .form-group label {
    font-size: 13px;
  }

  .form-input,
  select.form-input,
  textarea.form-input {
    padding: 6px 8px;
    font-size: 12px;
  }

  #editPopup .form-input,
  #editPopup select.form-input,
  #editPopup textarea.form-input,
  #popupEditPengurus .form-input,
  #popupEditPengurus select.form-input,
  #popupEditPengurus textarea.form-input,
  #popupTambah .form-input,
  #popupTambah select.form-input,
  #popupTambah textarea.form-input {
    font-size: 13px;
  }

  textarea.form-input {
    min-height: 60px;
  }

  .coordinate-row {
    gap: 8px;
  }

  .status-option label {
    height: 26px;
  }

  #editPopup .status-option {
    font-size: 12px;
  }

  #popupTambah .status-option {
    font-size: 12px;
  }

  .btn-simpan-koperasi {
    margin-top: 12px;
    padding: 10px;
    font-size: 13px;
  }

  .marker-error-toast {
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 10000;
    margin-bottom: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }

  .marker-success-toast {
    top: 88px;
    left: 12px;
    right: 12px;
    transform: none;
    text-align: center;
    font-size: 13px;
    white-space: normal;
  }
}