/* ===============================
   Layout
   =============================== */
.bwmp-wrapper {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: stretch;
}

#bwmp-map {
  min-height: 520px;
  border-radius: 8px;
  overflow: hidden;
}

/* ===============================
   Panel
   =============================== */
.bwmp-panel {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  position: relative;
}

.bwmp-field { margin-bottom: 14px; }
.bwmp-field label { display:block; font-weight:600; margin-bottom:6px; }

.bwmp-field input[type="date"],
.bwmp-field input[type="time"],
.bwmp-field select {
  width:100%;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:15px;
  font-family: inherit;
  background:#fff;
  color:#333;
  -webkit-appearance: none;
  appearance: none;
}

/* Geocoder */
#bwmp-geocoder-start, #bwmp-geocoder-end { position: relative; z-index: 1; }
#bwmp-geocoder-start:focus-within, #bwmp-geocoder-end:focus-within { z-index: 10000 !important; }
#bwmp-geocoder-start .mapboxgl-ctrl-geocoder, #bwmp-geocoder-end .mapboxgl-ctrl-geocoder { max-width: 100%!important; width: 100%; position: relative; z-index: 0; overflow: visible !important; }
#bwmp-geocoder-start .mapboxgl-ctrl-geocoder input[type="text"],
#bwmp-geocoder-end .mapboxgl-ctrl-geocoder input[type="text"] { width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #333;
    -webkit-appearance: none;
    appearance: none; }

/* Dropdown */
.mapboxgl-ctrl-geocoder .suggestions{
  position:absolute!important; top:100%!important; left:0!important; width:100%!important;
  background:#fff; border:1px solid #ddd; border-top:none; border-radius:0 0 6px 6px;
  z-index:10001!important; box-shadow:0 6px 12px rgba(0,0,0,.12); max-height:240px; overflow-y:auto;
}
.mapboxgl-ctrl-geocoder .suggestions li{ padding:10px 12px; cursor:pointer; background:#fff; }
.mapboxgl-ctrl-geocoder .suggestions li:hover, .mapboxgl-ctrl-geocoder .suggestions li.active{ background:#f3f3f3; }

/* Buttons */
.bwmp-btn{
  width:100%; padding:12px; background:#d33; color:#fff; border:none; border-radius:6px; font-weight:700; cursor:pointer; font-size:15px;
}
.bwmp-btn:hover{ background:#b82020; }
.bwmp-btn-primary{ background:#d33; }

.bwmp-btn-small{
  margin-top:6px; padding:8px 12px; background:#2d8f2d; color:#fff; border:none; border-radius:6px; font-size:14px; cursor:pointer; display:block;
}
.bwmp-btn-small:hover{ background:#1f6f1f; }

/* Summary */
.bwmp-summary{ margin-top:16px; background:#fafafa; border:1px solid #eee; padding:12px; border-radius:6px; font-size:15px; }
.bwmp-summary div{ margin:6px 0; }

/* ===============================
   Modal
   =============================== */
.bwmp-modal{ position:fixed; inset:0; display:none; z-index:99999; }
.bwmp-modal.is-open{ display:block; }
.bwmp-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.bwmp-modal__dialog{
  position:relative; z-index:1; max-width:560px; width:92%; margin:6vh auto; background:#fff; border-radius:12px; padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.bwmp-modal__close{
  position:absolute; right:8px; top:6px; width:36px; height:36px; border:none; background:transparent; font-size:28px; cursor:pointer; color:#888;
}
.bwmp-modal__close:hover{ color:#333; }

.bwmp-form-row{ margin-bottom:12px; }
.bwmp-form-row label{ display:block; font-weight:600; margin-bottom:6px; }
.bwmp-form-row input[type="text"],
.bwmp-form-row input[type="tel"]{
  width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:15px;
}
.bwmp-help{ display:block; color:#777; font-size:12px; margin-top:4px; }
.bwmp-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

body.bwmp-modal-open{ overflow:hidden; }

/* ===============================
   Responsive
   =============================== */
@media (max-width: 768px){
  .bwmp-wrapper{ display:block; }
  .bwmp-panel{ padding:14px; box-shadow:none; border-radius:0; }
  .bwmp-field{ margin-bottom:16px; }
  .bwmp-field label{ font-size:14px; margin-bottom:4px; }
  .bwmp-field input[type="date"], .bwmp-field input[type="time"], .bwmp-field select,
  #bwmp-geocoder-start .mapboxgl-ctrl-geocoder input[type="text"], #bwmp-geocoder-end .mapboxgl-ctrl-geocoder input[type="text"]{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #333;
    -webkit-appearance: none;
    appearance: none;
  }
  .bwmp-btn-small{ margin-top:8px; padding:12px 16px; font-size:15px; border-radius:8px; width:100%; text-align:center; }
  .bwmp-btn{ padding:16px; font-size:17px; border-radius:10px; }
  .bwmp-summary{ font-size:15px; margin-top:18px; border-radius:8px; padding:14px; }
  #bwmp-map{ margin-top:18px; min-height:300px; border-radius:0; }
  .bwmp-grid-2{ grid-template-columns:1fr; }
}
#bwmp-modal-title{text-align: center;}
.mapboxgl-ctrl-bottom-left{display: none;}
.mapboxgl-ctrl-bottom-right{display: none;}
/* luôn cho wrapper full-width của container bố */
.bwmp-wrapper{width:100%; display:grid; grid-template-columns:minmax(340px,420px) minmax(520px,1fr); gap:16px;}

/* đảm bảo cột bản đồ có tối thiểu 520px để không biến mất */
#bwmp-map{ min-height:520px; min-width:520px; border-radius:8px; overflow:hidden; }

/* dưới 980px thì cho xếp dọc (map xuống dưới) */
@media (max-width: 980px){
  .bwmp-wrapper{ grid-template-columns:1fr; }
  #bwmp-map{ min-width:0; margin-top:18px; }
}