/* PE_UI_DIALOGS_V3 — themed alert / confirm / tooltip, matched to the LASSO popup.
 *
 * Values taken from js/lasso-styles.css rather than the picker, which uses a
 * different family:
 *   primary  #1a1a1a, hover #333, with the PE gradient stripe along the bottom
 *            (#2255A4 -> #E87A1E -> #F7941D -> #FF4136 — the logo colours)
 *   cancel   transparent, #8a8578 text, 1.5px #e2ddd4 border, hover #fafaf8
 *   both     flex:1 so they split the width, 12px padding, 10px radius, no border
 *
 * The gradient stripe is what makes the lasso popup read as Paint Element, so a
 * confirm carries it too and the two look like the same component.
 */
.pe-dlg-back {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 26, 26, 0.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.16s ease;
  padding: 20px;
}
.pe-dlg-back.is-in { opacity: 1; }
.pe-dlg {
  width: 100%; max-width: 400px;
  background: #fff;
  border: 1.5px solid #f0ede6;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(26, 26, 26, 0.26);
  overflow: hidden;
  transform: translateY(6px) scale(0.99);
  transition: transform 0.16s ease;
  font-family: 'DM Sans', sans-serif;
  color: #1a1a1a;
}
.pe-dlg-back.is-in .pe-dlg { transform: none; }
.pe-dlg-body {
  padding: 24px 22px 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #1a1a1a;
}
/* the lasso popup splits its buttons across the width */
.pe-dlg-foot {
  display: flex;
  gap: 8px;
  padding: 0 20px 20px;
}
/* .lasso-popup-btn */
.pe-dlg-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: none;
  transition: background 0.15s;
}
/* .lasso-popup-btn--cancel */
.pe-dlg-btn {
  background: transparent;
  color: #8a8578;
  border: 1.5px solid #e2ddd4;
}
.pe-dlg-btn:hover { background: #fafaf8; }
/* .lasso-popup-btn--add, gradient stripe and all */
.pe-dlg-primary {
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
}
.pe-dlg-primary::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2255A4, #E87A1E, #F7941D, #FF4136);
}
.pe-dlg-primary:hover { background: #333 !important; }
/* a delete keeps the same shape; only the fill says it is destructive */
.pe-dlg-primary.is-danger { background: #8c2f22 !important; }
.pe-dlg-primary.is-danger:hover { background: #a5301f !important; }
.pe-dlg-btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

/* tooltip, in the same near-black */
.pe-tip {
  position: fixed; z-index: 100001;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.24);
}
.pe-tip.is-in { opacity: 1; }