/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE EDIT MODE  (profile-editmode.css)
   A click-to-edit overlay system. When edit mode is ON every editable region
   gets a dashed hover outline; clicking one selects it and opens a bottom
   toolbar with contextual controls (fill type, solid color, gradient stops,
   background image, font family/size, text color). All changes are applied
   live and saved to localStorage by profile-editmode.js.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Dim the page while editing so the toolbar pops (matches reference) ── */
body.pe-editing .site-header,
body.pe-editing .site-footer { filter: brightness(0.6); transition: filter .2s; }

/* ── Editable hover/selected outlines (only while editing) ── */
body.pe-editing [data-pe] {
  cursor: pointer;
  transition: outline .12s, box-shadow .12s;
}
body.pe-editing [data-pe]:hover {
  outline: 2px dashed rgba(120, 200, 255, 0.9);
  outline-offset: -2px;
}
body.pe-editing [data-pe].pe-selected {
  outline: 2px solid #3aa0ff !important;
  outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(58, 160, 255, 0.25) !important;
}

/* ── "Select an element" hint bubble ── */
.pe-hint {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 99998;
  background: linear-gradient(to bottom, #4a4a4a, #2b2b2b);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 60px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  /* notched corner like the rest of the UI */
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  pointer-events: none;
  display: none;
}
body.pe-editing .pe-hint { display: block; }
body.pe-editing.pe-has-selection .pe-hint { display: none; }

/* ── Bottom editor toolbar ── */
.pe-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: linear-gradient(to bottom, #1d1d1d, #0c0c0c);
  border-top: 1px solid #000;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.6);
}
body.pe-editing.pe-has-selection .pe-toolbar { display: flex; }

.pe-field {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8e8e8;
  font-size: 14px;
}
.pe-field > label { font-weight: 500; white-space: nowrap; }

.pe-field select,
.pe-field input[type="number"],
.pe-field input[type="text"] {
  background: #fff;
  color: #111;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
}
.pe-field input[type="number"] { width: 64px; }
.pe-field input[type="text"]   { width: 180px; }

.pe-swatch {
  width: 34px; height: 26px;
  border: 1px solid #000;
  border-radius: 3px;
  cursor: pointer;
  background: #ff0000;
}
.pe-field input[type="color"] { display: none; }

.pe-file-btn,
.pe-ok-btn {
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
}
.pe-file-btn { background: linear-gradient(to bottom, #4a4a4a, #2b2b2b); }
.pe-ok-btn {
  background: linear-gradient(to bottom, #2fd43a, #18a522);
  color: #fff;
  margin-left: auto;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
  padding: 10px 26px;
}
.pe-ok-btn:hover { filter: brightness(1.08); }

/* Hide a field group when not relevant to the selection */
.pe-field[hidden] { display: none; }

/* The little group separators */
.pe-sep { width: 1px; height: 26px; background: rgba(255,255,255,0.15); }

/* ── Edit Mode toggle button (added near Edit Profile) ── */
.pe-toggle-btn {
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 6px;
  background: linear-gradient(to bottom, #5a5a5a, #333);
  color: #fff;
  font-weight: bold;
  padding: 8px 14px;
  cursor: pointer;
}
.pe-toggle-btn.pe-active {
  background: linear-gradient(to bottom, #2fd43a, #18a522);
}

/* Gradient angle slider compactness */
.pe-field input[type="range"] { width: 110px; }