/* =========================================================
   MEYER FALLOUT MAPPER — CLEAN MERGED CSS (single source of truth)
   ========================================================= */

/* === CORE LAYOUT === */
.mfm-wrap{
  display:flex;
  gap:16px;
  align-items:stretch;

  /* Full width (no cap) */
  max-width:none;
  width:100%;
  margin:0;
}

.mfm-controls{
  width:300px;
  min-width:300px;
  flex:0 0 300px;
}

.mfm-map{
  position:relative;
  flex:1 1 auto;
  min-width:0;         /* prevents flex overflow issues */
  min-height:650px;
}

/* === MAP === */
#mfm_map{
  width:100%;
  height:100%;
  min-height:650px;
  border-radius:6px;
  overflow:hidden;
}

/* === LEGEND OVER MAP === */
.mfm-legend{
  position:absolute;
  top:12px;
  left:12px;
  z-index:5;
  background:rgba(255,255,255,0.95);
  padding:10px 12px;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  max-width:260px;
}

.mfm-legend-title{ font-weight:700; margin-bottom:6px; }
.mfm-legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
  font-size:13px;
}
.mfm-legend-swatch{
  width:14px;
  height:14px;
  border-radius:3px;
  border:1px solid #333;
}

/* === CONTROLS === */
.mfm-row{ margin-bottom:14px; }
.mfm-row label{ display:block; font-weight:600; margin-bottom:4px; }
#mfm_notes{ width:100%; }

/* Default action rows */
.mfm-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.mfm-actions .button{ flex:1; }

/* === BUTTON COLORS (YOUR CURRENT REQUEST) === */
#mfm_draw_audience{
  background:#f9a825;
  border-color:#f9a825;
  color:#000;
  font-weight:700;
}
#mfm_draw_parking{
  background:#1565c0;
  border-color:#1565c0;
  color:#fff;
  font-weight:700;
}

/* Clear Areas = BLACK */
#mfm_clear_areas{
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
  font-weight:700;
}
#mfm_clear_areas:hover{ background:#222 !important; }

/* Clear All = RED */
#mfm_clear_all{
  background:#b71c1c !important;
  border-color:#b71c1c !important;
  color:#fff !important;
  font-weight:700;
}
#mfm_clear_all:hover{ background:#8e0000 !important; }

/* (If you still have a stop/cancel drawing button) */
#mfm_stop_drawing{
  background:#444;
  border-color:#444;
  color:#fff;
  font-weight:700;
}

/* === OPTIONAL GRID BUTTON LAYOUT (only if you add these classes in PHP) === */
.mfm-btn-grid{ display:grid; gap:10px; }
.mfm-btn-grid-2{ grid-template-columns:1fr 1fr; }
.mfm-btn-grid-3{ grid-template-columns:1fr 1fr 1fr; }
.mfm-btn-grid .button{
  width:100%;
  min-height:54px;
  white-space:normal;
  line-height:1.2;
  padding:12px 10px;
}
.mfm-btn-full{
  grid-column:1 / -1;
  width:100% !important;
  min-height:46px !important;
}

/* Print notes box (JS creates #mfm_print_notes inside .mfm-map) */
.mfm-print-notes{
  display:none;
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:9999;
  background:rgba(255,255,255,0.95);
  border-radius:6px;
  padding:10px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  font-size:13px;
  line-height:1.25;
}

/* Show notes whenever print mode is active */
body.mfm-printing .mfm-print-notes{
  display:block !important;
}

/* Also force it on during actual printing */
@media print{
  .mfm-print-notes{
    display:block !important;
  }
}



/* === MOBILE FALLBACK === */
@media (max-width:760px){
  .mfm-wrap{ flex-direction:column; }
  .mfm-controls{
    width:100%;
    min-width:0;
    flex:1 1 auto;
  }
  #mfm_map{ min-height:500px; }
}

/* =========================================================
   PRINT — Map + Legend + Notes ONLY
   - Requires JS adding: body.classList.add("mfm-printing")
   ========================================================= */
@media print{

  /* Hide theme header/footer without deleting them */
  header, footer,
  .site-header, .site-footer,
  .elementor-location-header, .elementor-location-footer,
  .ast-header, .ast-footer,
  #masthead, #colophon,
  .header, .footer{
    display:none !important;
  }

  /* Hide everything by default... */
  body.mfm-printing *{ visibility:hidden !important; }

  /* ...then show only the mapper */
  body.mfm-printing .mfm-wrap,
  body.mfm-printing .mfm-wrap *{
    visibility:visible !important;
  }

  html, body{
    margin:0 !important;
    padding:0 !important;
  }

  /* Hide controls during print */
  body.mfm-printing .mfm-controls{ display:none !important; }

  /* Print map full page */
  body.mfm-printing .mfm-wrap{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.mfm-printing .mfm-map{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.mfm-printing #mfm_map{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    border-radius:0 !important;
  }

  /* Keep legend visible */
  body.mfm-printing .mfm-legend{
    position:absolute !important;
    top:12px !important;
    left:12px !important;
    z-index:9999 !important;
  }

  /* Notes overlay visible on print */
  body.mfm-printing #mfm_print_notes{
    display:block !important;
    position:absolute !important;
    left:12px !important;
    bottom:12px !important;
    z-index:9999 !important;
    background:rgba(255,255,255,0.95) !important;
    border:1px solid #ccc !important;
    border-radius:6px !important;
    padding:10px 12px !important;
    max-width:420px !important;
    white-space:pre-wrap !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  #mfm_print_notes strong{
    display:block;
    margin-bottom:6px;
  }

  /* Optional margins */
  @page{ margin:0.5in; }
}