.nxcov-wrap{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.nxcov-head{ margin: 6px 0 10px; }
.nxcov-title{ font-size: 18px; font-weight: 800; color:#0f172a; }
.nxcov-subtitle{ font-size: 13px; color:#64748b; margin-top:4px; line-height: 1.45; }

.nxcov-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin: 10px 0 8px;
}

.nxcov-input{
  flex: 1 1 380px;
  min-width: 260px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  outline: none;
  background: #fff;
}
.nxcov-input:focus{
  border-color:#0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}

.nxcov-btn{
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: #0f172a;
  color:#fff;
  cursor:pointer;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(2,6,23,.12);
}
.nxcov-btn:hover{ filter: brightness(1.08); }
.nxcov-btn:active{ transform: translateY(1px); }
.nxcov-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,165,233,.18), 0 8px 20px rgba(2,6,23,.12);
}

.nxcov-btn-ghost{
  background:#fff;
  color:#0f172a;
  border:1px solid #cbd5e1;
  box-shadow:none;
}
.nxcov-btn-ghost:hover{ background:#f8fafc; }

.nxcov-btn-wide{ width: 100%; }

.nxcov-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  margin-top: 10px;
}
@media (max-width: 860px){
  .nxcov-grid{ grid-template-columns: 1fr; }
}

.nxcov-map{
  width: 100%;
  height: 420px; /* naik sedikit biar enak untuk klik pilih titik */
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid #e2e8f0;
  background:#f1f5f9;
  position: relative;
}

/* Hint kecil di atas map: “klik peta untuk pilih titik” */
.nxcov-map::after{
  content: "Klik peta untuk pilih titik • Marker bisa digeser (drag)";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .75);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

/* Leaflet: perbaiki tampilan control biar rapi */
.leaflet-control-zoom a{
  border-radius: 10px !important;
}
.leaflet-control-zoom{
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px rgba(2,6,23,.10) !important;
  overflow:hidden;
}
.leaflet-container{
  font: inherit;
}

/* Popup leaflet biar clean */
.leaflet-popup-content-wrapper{
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(2,6,23,.15) !important;
}
.leaflet-popup-content{
  margin: 10px 12px !important;
  font-size: 13px;
  color:#0f172a;
}

.nxcov-side{
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

.nxcov-notice{
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color:#0f172a;
  font-size: 14px;
}
.nxcov-notice.is-success{ background:#ecfdf5; border-color:#86efac; }
.nxcov-notice.is-warning{ background:#fffbeb; border-color:#f59e0b; }
.nxcov-notice.is-danger{ background:#fef2f2; border-color:#fecaca; }
.nxcov-notice.is-info{ background:#eff6ff; border-color:#bfdbfe; }
.nxcov-small{ font-size: 12px; color:#334155; margin-top: 6px; }

.nxcov-formwrap{ margin-top: 10px; }
.nxcov-formtitle{
  font-weight: 900;
  margin-bottom: 8px;
  color:#0f172a;
}

.nxcov-row{ margin-bottom: 10px; }
.nxcov-row label{
  display:block;
  font-size: 12px;
  font-weight: 700;
  color:#334155;
  margin-bottom: 6px;
}
.nxcov-row input,
.nxcov-row textarea{
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
  background:#fff;
}
.nxcov-row input:focus,
.nxcov-row textarea:focus{
  border-color:#0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}

/* BARU: styling field koordinat agar jelas read-only */
#nxcov-coord-display{
  background: #f8fafc;
  border-color:#e2e8f0;
  color:#334155;
  font-weight: 700;
}
#nxcov-coord-display::placeholder{
  color:#94a3b8;
  font-weight: 600;
}

/* Suggestions */
.nxcov-suggestions{
  display:none;
  margin: 6px 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
}
.nxcov-suglist{ list-style:none; padding:0; margin:0; }
.nxcov-sugbtn{
  width:100%;
  text-align:left;
  border:0;
  background:#fff;
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid #f1f5f9;
}
.nxcov-sugbtn:hover{ background:#f8fafc; }
.nxcov-sugbtn:active{ background:#f1f5f9; }
.nxcov-sugtitle{ font-size: 13px; font-weight: 800; color:#0f172a; }
.nxcov-sugmeta{ font-size: 12px; color:#64748b; margin-top:3px; }

/* Status form */
.nxcov-formstatus{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid #e2e8f0;
}
.nxcov-formstatus.ok{ background:#ecfdf5; border-color:#86efac; }
.nxcov-formstatus.bad{ background:#fef2f2; border-color:#fecaca; }

/* Mobile polish */
@media (max-width: 480px){
  .nxcov-map{ height: 360px; }
  .nxcov-btn{ width: 100%; }
  .nxcov-input{ min-width: 100%; }
  .nxcov-map::after{
    font-size: 11px;
    padding: 7px 9px;
  }
}