:root {
    --delete-all-red: #FF2929;
    --photo-change-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33268 10.6671L2.66602 13.3338L5.33268 12.6671L13.0567 4.94312C13.3066 4.69308 13.4471 4.354 13.4471 4.00045C13.4471 3.6469 13.3066 3.30782 13.0567 3.05778L12.942 2.94312C12.692 2.69315 12.3529 2.55273 11.9993 2.55273C11.6458 2.55273 11.3067 2.69315 11.0567 2.94312L3.33268 10.6671Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.33268 10.6667L2.66602 13.3333L5.33268 12.6667L11.9993 6L9.99935 4L3.33268 10.6667Z' fill='white'/%3E%3Cpath d='M9.99935 4L11.9993 6M8.66602 13.3333H13.9993' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.dropArea.cover {
    position: relative;
    aspect-ratio: 3.84;
}

.dropArea__cover__delete {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 28px;
    height: 28px;

    background: #383838;
    border-radius: 100%;
}

.dropArea__cover__delete:before {
    content: var(--bin-icon);
    position: relative;
    top: 3px;
    left: 8px;
}

.nohover:hover {
    opacity: 1 !important;
}

.dropArea__gallery {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 12px;
}

.dropArea__gallery a {
    color: currentColor;
}

.dropArea__gallery a:hover {
    color: currentColor;
}

.dropArea__gallery__header {
  display: flex;
  justify-content: space-between;
}

.dropArea__gallery__header-right {
  display: flex;
  gap: 12px;
}


.dropArea__gallery__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 80px;
  background: #383838;
  border-radius: 12px;
}

.dropArea__gallery__container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropArea__gallery__plus {
  font-size: 32px;
  line-height: 28px;
}

.dropArea__gallery__tile__close {
  display: none;
  font-size: 48px;
}

.dropArea__gallery__tile:hover > .dropArea__gallery__tile__close {
  display: block;
}

.dropArea__gallery__delete-all {
    color: var(--delete-all-red) !important;
}

.dropArea__gallery__delete-all:hover {
    color: var(--delete-all-red) !important;
}


.addEvent__author {
  position: relative;
  width: 324px;
  padding: 20px 16px;
  background: #383838;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.addEvent__author__delete {
  appearance: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 100%;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addEvent__author__delete::before {
  position: relative;
  content: "×";
  font-size: 36px;
  line-height: 12px;
}

.addEvent__author .addEvent__fieldInput > input {
  background: #535353;
}

.addEvent__author__photo-block {
  display: flex;
}

.addEvent__author__photo-block ul, li {
  padding: 0;
  margin: 0;
}

.addEvent__author__photo-text {
  opacity:50%;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.addEvent__author__photo-text li {
  font-size:14px;
  line-height: 1;
}
.addEvent__author__photo-label {
  display: block;
  margin-bottom: -12px;
}

.addEvent__author__photo {
    position: relative;
    height: 100px;
    min-width: 100px;
    background: #535353;
    border-radius: 24px;
}

.addEvent__author__photo:not(.has-img)::before {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 32px;
    line-height: 17px;
    content: "+";
    transform: translate(-50%, -50%);
}

.addEvent__author__photo {
    cursor: pointer;
}

.addEvent__author__cards-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.addEvent__author__cards-title a, a:hover {
  color: currentColor;
}

.addEvent__author__cards-title > div {
  display: flex;
  gap: 44px;
}

.addEvent__author__add-new::before {
  content: "+";
  position: relative;
  top: 5px;
  font-size: 32px;
  line-height: 12px;
  padding-right: 8px;
}

.addEvent__author__delete-all {
  color: var(--delete-all-red) !important;;
}

.addEvent__author__photo-delete {
  position: absolute;
  appearance: none;
  top: 0;
  right: 0;
  border: none;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  background: #535353;
}

.addEvent__author__photo-delete::before {
  position: relative;
  width: 8px;
  height: 10px;
  top: -4.5px;
  transform: scale(.85);
  content: var(--bin-icon);
  display: block;
}

.addEvent__author__photo-change-text {
  cursor: pointer;
  user-select: none;
}

.addEvent__author__photo-change-text::before {
  position: relative;
  user-select: none;
  cursor: pointer;
  
  content: var(--photo-change-icon);
  width: 16px;
  height: 16px;
  top: 2px;
  
  margin-right: 8px;
}

.addEvent__author-container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

/* Extra event image slots (card / top10 / slider / ad) */
.dropArea.dropArea--slot {
    position: relative;
    min-height: 140px;
    aspect-ratio: 16 / 9;
}

.dropArea.dropArea--slot .dropArea__title {
    font-size: 15px;
}

.dropArea.dropArea--slot .dropArea__text {
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.85;
    max-width: 92%;
}

.dropArea__slot__clear {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background: #383838;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}

.dropArea__slot__clear:hover {
    color: #fff;
    opacity: 0.9;
}

.dropArea__slot__error {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 41, 41, 0.92);
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    z-index: 2;
}

html[data-theme="light"] .dropArea__slot__clear {
    background: #1c1c1c;
    color: #fff;
}

html[data-theme="light"] .dropArea.dropArea--slot.has-preview,
html[data-theme="light"] .dropArea.cover.has-preview {
    border: 1px solid #e5e5e5;
}