/* =========================================================
   Marker customization overrides
   ========================================================= */

/* A transparent marker keeps only the emoji itself. */
.map-marker[style*="transparent"],
.marker-preview[style*="transparent"],
.preview-marker[style*="transparent"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Make the transparent option obvious in the color picker. */
.color-grid button[style*="transparent"] {
  position: relative;
  background: #fff !important;
}

.color-grid button[style*="transparent"]::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #98a2b3;
  font-size: 16px;
  font-weight: 700;
}

.color-grid button[style*="transparent"].selected::after {
  color: #111827;
}

/* The profile circle is actually a logout action, which was needlessly
   disguised as a profile control. Make the action explicit. */
.profile-button {
  width: auto !important;
  min-width: 72px;
  padding: 0 13px !important;
  border-radius: 10px !important;
  font-size: 0 !important;
}

.profile-button::after {
  content: "Выйти";
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .profile-button {
    width: auto !important;
    min-width: 64px;
    height: 40px;
    padding: 0 11px !important;
    border-radius: 10px !important;
  }
}