@charset "utf-8";

.theme-switcher {
    opacity: 0.25;
    /* position: absolute; */
    top: 47px;
    right: 26%;
    /* border-radius: 10px; */
    z-index: 10000;
    display: flex;
    /* gap: 8px; */
    /* padding: 5px; */
    /* background: rgba(0, 0, 0, 0.7); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    justify-content: flex-end;
    transition: all 0.3s ease;
}

#templatemo_menu:hover .theme-switcher {
  opacity: 1;
}

.theme-option {
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
    padding: 3px;
    border: 2px solid transparent;
}

.theme-option:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.1);
}

.theme-option.active {
/* border-color: #ffffff; */
/* background: rgba(255, 255, 255, 0.2); */
/* transform: scale(1.15);*/
}

.theme-icon {
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}

.blue-theme {
background: linear-gradient(135deg, #1e3c72, #2a5298);
}

.red-theme {
background: linear-gradient(135deg, #8b0000, #b22222);
}

.gray-theme {
background: linear-gradient(135deg, #898989, #4c5864);
}

/* Скрываем текст */
.theme-option span {
    display: none;
}

/* Эффекты при наведении на иконки */
.theme-option:hover .theme-icon {
    border-color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.theme-option.active .theme-icon {
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}