/* Новая структура двухпанельного интерфейса */
.settings-panel {
    display: flex;
    margin: 0 -15px;
}

/* Замок для премиум-компонентов (колёса, стрелки, фоны) */
.wheel-img > div.premium-locked,
.arrow-img > div.premium-locked {
    position: relative;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.wheel-img > div.premium-locked::before,
.arrow-img > div.premium-locked::before {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    z-index: 10;
    pointer-events: none;
}

.wheel-img > div.premium-locked::after,
.arrow-img > div.premium-locked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    pointer-events: none;
}

.wheel-img > div.premium-locked:hover,
.arrow-img > div.premium-locked:hover {
    opacity: 0.7;
}

/* Подсказка при наведении на заблокированный компонент */
.wheel-img > div.premium-locked[title],
.arrow-img > div.premium-locked[title] {
    cursor: help !important;
}

/* Стили модальных окон обновления тарифа */
div#template_components_upgrade_modal,
div#background_upgrade_modal {
    width: 450px;
    margin: 0 auto;
}

.settings-nav {
    width: 60px;
    background: #ffffff;
    padding: 10px 0;
    flex-shrink: 0;
}

.settings-nav .nav-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.settings-nav .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    color: #495057;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.settings-nav .nav-icon:hover, 
.settings-nav .nav-icon.active {
    background: #FFEEE9;
    color: white;
}

.settings-nav .nav-icon .icon {
    font-size: 18px;
}

.settings-nav .nav-title {
    position: absolute;
    left: 45px;
    background: #0D072D;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.settings-nav .nav-icon:hover .nav-title {
    opacity: 1;
    visibility: visible;
}

.settings-content {
    flex: 1;
    padding: 0 15px;
    overflow-y: auto;
}

/* Скрываем оригинальные заголовки аккордеона */
.desktop-settings .card-header a[role="button"][data-toggle="collapse"], .mobile-settings .card-header a[role="button"][data-toggle="collapse"] {
    display: none;
}

/* Показываем содержимое всех аккордеонов */
.right_panel #accordion_1 .collapse, .right_panel #accordion_3 .collapse {
    display: block !important;
    height: auto !important;
}

.right_panel #accordion_1 .collapsing, .right_panel #accordion_3 .collapsing {
    display: block !important;
    height: auto !important;
}

/* Адаптивность */
@media (max-width: 768px) {
    .settings-panel {
        flex-direction: column;
    }
    
    .settings-nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 5px;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
    
    .settings-nav .nav-icons {
        flex-direction: row;
    }
    
    .settings-nav .nav-title {
        display: none;
    }
}

.form-control, .dd-handle{border: 1px #e0e3e4 solid;}
.colorpicker-element .input-group-addon i {border: 1px solid #e0e3e4;}
label{color:#556070;}

.wheel-widget .settings-nav{min-height:510px;}

textarea.form-control {
  height: auto;
  min-height: 62px;
  resize: vertical;
  overflow: auto;
}

#fon .banner, .banner{
	width: auto;
    max-width: 112px;
    height: auto;
    margin: 0;
}

/* New вкладка секторов */

.segments .segment {
    padding: 6px 10px 10px;
}

.segments .segment:first-child {
    padding-top: 6px;
}

/* Кнопка добавления */
#add-segment.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px !important;
  border-radius: 8px;
  line-height: 1.3;
  margin-bottom: 12px;
}

/* Список сегментов */
#segments {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Карточка сектора */
.segment {
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #fafbfc;
  padding: 14px 14px 12px;
}

/* Заголовок сектора */
.segment .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #e6eaf0;
  padding-bottom: 6px;
  margin-bottom: 12px;
  color: #556070;
  font-weight: 500;
  font-size: 15px;
}

/* Иконки в заголовке */
.segment .right .link-delete {
  color: #e54242;
  cursor: pointer;
  transition: color .15s ease;
}
.segment .right .link-delete:hover { color:#2d6cdf; }

/* Инпуты и лейблы вертикально */
.segment label {
  display:block;
  margin-bottom:4px;
  font-size:14px;
  color:#556070;
}
.segment .form-control {
  height:38px;
  padding:.35rem .6rem;
  font-size:14px;
  margin-bottom:10px;
}
.segment .input-group {
  margin-bottom:10px;
}

/* Промокод и чекбокс авто-генерации */
.segment .coupon-block {
  border-top:1px dashed #e6eaf0;
  padding-top:10px;
  margin-top:8px;
}
.segment .coupon-block .mb-10 {
  margin-top:6px;
  margin-bottom:0 !important;
}


/* Подпись вероятности */
.segment .drop_probability {
  font-weight:600;
  color:#2d6cdf;
}


/* Сообщение об окончании акции */
.promotion_end_message {
	border: 1px dashed #e6e6e6;
    border-radius: 10px;
    background: #fff;
    width: 92%;
    padding: 12px 14px 12px;
    margin-bottom: 14px;
    margin-left: 15px;
}

/* Адаптив */
@media (max-width:576px){
  .segment .form-control { font-size:13px; }
}

.segment .right .link-delete[title="добавить ссылку"] i {
    color: #2d9cf0 !important;
}

.segment .right .link-delete[title="удалить сектор"] i {
    color: #e54242 !important;
}

span.link-delete.link-win-screen {
    margin-right: auto;
}

.segment .right .link-delete:nth-child(2) {
    margin-right: auto !important;
}

.segment .right .link-delete:hover {
    color: #d13232;
}

.form-control:not(textarea),
.dd-handle {
  height: calc(2.25rem + 4px) !important;
}

.segment.removing {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

.dnd-ghost{
  position: fixed;
  pointer-events: none;
  z-index: 10010;
  opacity: .98;
  transform: translateY(-20px);
  box-sizing: border-box;
}
.input-wrap.dragging{
  opacity:.35;
  transform: scale(1.02);
}

/* Вкладка секторов End */

/* Вкладка цветов */

  .ui-group{border:1px solid #e6e6e6;border-radius:12px;background:#fafbfc;margin-bottom:14px;}
  .ui-group__title{font-weight:500;color:#556070;font-size:15px;padding:10px 14px;border-bottom:1px dashed #e6eaf0;}
  .ui-group__body{padding:10px 10px 10px;}
  .ui-group .form-control{height:38px;padding:.35rem .6rem;}
  .ui-group .input-group{margin-bottom:10px;}
  .ui-group label{margin-bottom:3px;}

/* Вкладка цветов End */


/* Конфетти */
.confetti-pickers { display:flex; gap:8px; flex-wrap: wrap;}
.confetti-icon { width:147px; height:auto; border:2px solid #fff; border-radius:10px; cursor:pointer }
.confetti-icon.active { border-color:#0d072d }
#confetti-overlay { position:absolute; inset:0; pointer-events:none; z-index:30 }
#confetti-overlay canvas { width:100%; height:100%; display:block }
.has-confetti-overlay { position: relative; }
/* Конфетти End */

/* Редактирование формы inline */
.gl-left, .gl-left-btn {
  position: relative;
  display: block;
  width: 100%;
}

/* Общие стили для всех карандашей */
.gl-pencil{
  position: absolute;
  left: -32px;
  top: 55%;
  transform: translateY(-50%);
  width: 24px; 
  height: 24px;
  background-image: url('/theme/dist/img/icons-settings/edit-text.svg');
  background-repeat: no-repeat;
  cursor: pointer; 
  opacity: 0.7; 
  z-index: 100; 
  transition: 0.2s;
}
.gl-pencil:hover{ opacity:1; }

/* состояние редактирования */
.gl-editing{
  outline: 2px dashed #8ab4f8;
  outline-offset: 2px;
  background: rgba(138,180,248,.08);
}

.gl-pencil{
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
  outline: none;
}
.gl-pencil:focus{ outline: none; }
.gl-btn-editing, .gl-btn-editing * { cursor: text; }


/* Редактирование формы inline End */

/* Drag&Drop полей */

.frm-inputs {
    position: relative;
}

.gl-drag-handle:hover {
    opacity: 1 !important;
}

.input-wrap {
    transition: all 0.3s ease;
    cursor: default;
}

/* Стили для клона при перетаскивании */
.gl-drag-handle ~ * {
    pointer-events: none;
}

.input-wrap .form__input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background: white !important;
    color: #333 !important;
    box-sizing: border-box !important;
}

.input-wrap select.form__input.gl-extra-select-preview {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 42px 0 16px !important;
    font-size: 16px !important;
    line-height: 44px !important;
    box-sizing: border-box !important;
}

select.form__input.gl-extra-select-ui {
  height: 44px !important;
  min-height: 44px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 46px 0 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%230d072d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 12px 8px !important;
  color: #0d072d !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
select.form__input.gl-extra-select-ui::-ms-expand {
  display: none;
}

#name_contacts.form__input,
#phone_number.form__input,
#email.form__input,
#without.form__input {
    /* Общие стили инпутов */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.drag-insertion {
    animation: pulse 0.6s infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}


button.gl-trash {
    outline: none;
}
/* Drag&Drop полей End */