/* Конструктор виджета (спорт / мероприятия) — разметка как в WP-референсе */

.constructor {
    color: #e5e7eb;
}

.constructor__heading {
    margin-bottom: 1.5rem;

    a {
        text-decoration: underline;
    }
}

.constructor__heading .text {
    margin-top: 0.75rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.text-md {
    font-size: 1.25rem;
    line-height: 1.35;
}

.fw-bold {
    font-weight: 700;
}

.constructor__form .text {
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

.constructor__step .text, .input {
    line-height: 1.25;
    font-size: 16px;
}

.accent-color,
.constructor__form .accent-color {
    color: #40f3f7;
}

.constructor__step {
    margin-bottom: 1.75rem;
}

.constructor .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    align-items: flex-start;

    @media (max-width: 767px) {
        flex-direction: column;
    }
}

.constructor .row .left {
    /* flex: 1 1 320px; */
    min-width: 0;
}

.input-line {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
}

.input-item {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
}

.input-item.radio-select {
    display: block;
}

.constructor .input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
}

.constructor textarea.input {
    min-height: 120px;
    font-family: ui-monospace, monospace;
    resize: vertical;
}

.range-input {
    margin: 8px 0 12px;

    @media (max-width: 767px) {
        width: 100%;
    }
}

.range-input input[type="range"] {
    width: 100%;
    max-width: 320px;
}

.theme-line {
    display: flex;
    margin-top: 15px;
}

.theme-input {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    flex-direction: column;
    margin-right: 54px;
}

.theme-input > .text {
    width: 100%;
    margin-bottom: 4px;
}

.theme-round {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid;
    flex-shrink: 0;
}

.radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    margin-top: 0.5rem;
}

.radio input[type="radio"],
.radio input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio__square {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #40f3f7;
}

.radio input[type="radio"]:checked + .radio__square,
.radio input[type="checkbox"]:checked + .radio__square {
    border-color: #40f3f7;
    background: #40f3f7;
    box-shadow: inset 0 0 0 2px #0f1b32;
}

.radio input[type="radio"]:focus-visible + .radio__square,
.radio input[type="checkbox"]:focus-visible + .radio__square {
    outline: 2px solid #40f3f7;
    outline-offset: 2px;
}

.constructor__preview {
    position: relative;
}

.constructor__preview .button {
    width: 100%;
    margin-bottom: 1rem;
}

#preview {
    min-height: 200px;
    border: 1px solid rgba(64, 243, 247, 0.35);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#preview iframe {
    display: block;
    width: 100%;
    min-height: 200px;
    border: 0;
}

.preview-placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.button.green-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 10px;
    border: none;
    white-space: nowrap;
    font-family: inherit;
    color: #203156;
    cursor: pointer;
    transition: filter .25s ease-in-out;
}

.button.green-bg:hover:not(:disabled) {
    background: #2de0e4;
}

.button.green-bg:disabled {
    opacity: 0.65;
    cursor: wait;
}

#code-copy-button {
    @media (min-width: 768px) {
        margin-top: 1rem;
    }
}

/* Как на /activity (event_schedule): search-select + мультивыбор */
.widget-constructor-filter-block {
    max-width: 100%;
}

.search-select__clear-btn {
    display: block;
    padding: 0;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font-size: 0.875rem;
    text-align: left;

    &:hover {
        color: #40f3f7;
    }
}

.search-select__clear-btn:hover {
    color: #40f3f7;
}

.search-select__clear-btn[hidden] {
    display: none !important;
}

.search-select__option--select-all {
    font-weight: 600;
    color: #40f3f7;
    border-bottom: 1px solid rgba(64, 243, 247, 0.25);
    margin-bottom: 4px;
}

.search-select--multiple .search-select__option--select-all::before {
    display: none;
}

.search-select--multiple .search-select__option[data-value]::before {
    pointer-events: none;
}

.constructor .sport-schedule-select {
    width: 100%;
}

.search-select {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-select.is-open {
    z-index: 30;
}

.search-select__native {
    display: none;
}

.search-select__button {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    font-size: 0.875rem;
    border: 1px solid #40f3f7;
    background: transparent url(../../../img/arrow_bottom.png) no-repeat 95% 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    min-height: 3.25rem;
    text-align: left;
    border-color: rgba(255, 255, 255, 0.5);
}

.search-select__button-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.5);
}

.search-select__dropdown {
    position: absolute;
    z-index: 40;
    top: 0;
    left: 0;
    right: 0;
    background: #223358;
    border-radius: 12px;
    border: 1px solid #40f3f7;
    padding: 10px 15px;
    overflow: hidden;
    display: none;
}

.search-select.is-open .search-select__dropdown {
    display: block;
    border-radius: 5px;
}

.search-select__search {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 5px;
    border: none;
    border-radius: 6px;
    background: #172644;
    color: #fff;
    font-size: 0.875rem;
    outline: none;
    box-sizing: border-box;
}

.search-select__list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    max-height: 220px;
    overflow-y: auto;
}

.search-select__option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 6px;
}

.search-select__option:hover {
    background: rgba(64, 243, 247, 0.13);
}

.search-select__option.is-selected {
    /* background: rgba(64, 243, 247, 0.2);
    color: #40f3f7; */
}

.search-select__option.is-disabled {
    opacity: 0.5;
    cursor: default;
}

/* Множественный выбор: чекбокс + подпись */
.search-select--multiple .search-select__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding:  6px 0px;
}

.search-select--multiple .search-select__option::before {
    content: '';
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    background: transparent;
}

.search-select--multiple .search-select__option.is-selected::before {
    background: #40f3f7;
    border-color: #40f3f7;
    box-shadow: inset 0 0 0 2px #0f1b32;
}

.search-select--multiple .search-select__option-label {
    flex: 1;
    min-width: 0;
}


.constructor__heading .text-md {
    text-align: center;
} 

.text-md {
    line-height: 1.25;
    font-size: 20px;
  }
  
  .green-bg {
    background-color: #40f3f7;
  }
  
  .fw-bold {
    font-weight: 600;
  }

.search-select__wrapper{
    position: relative;
    display: inline-block;
    min-width: 200px;
    text-align: left;
}

.widget-constructor-filter-block{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.constructor__step .text.fw-bold.accent-color {
    margin-bottom: 8px;
}

#code {
    border: 1px solid #40f3f7;
    border-radius: 5px;
    font-family: inherit;
    background: none;
    color: rgba(255, 255, 255, 0.5);
    resize: none;
    margin-top: 20px;
}

.input:focus {
    border-color: #000;
    outline: none;
}

.constructor {
    input[name="width"],
    input[name="height"] {
        width: 158px;
        margin-top: 8px;
        border-color: #40f3f7;
    }
    
    .range-input {
        width: 232px;
        margin-top: 4px;
    }
    
    .range-input__values {
        margin-top: 16px;
        margin-bottom: -4px;
    }
}



.constructor__preview {
  
  margin-bottom: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.constructor__preview .button {
  margin-top: 0px;
}

#preview {
  margin-top: 0px;
  flex: 1;
  border-radius: 10px;
  background: #0000001c;
  border: 1px dashed #425e8d;
  background-image: url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8+Cg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTEzIDguOTIyMjZMNy45MjIyNiAzLjg0NDUzQzYuNzk2MjMgMi43MTg0OSA0Ljk3MDU2IDIuNzE4NDkgMy44NDQ1MyAzLjg0NDUzQzIuNzE4NDkgNC45NzA1NiAyLjcxODQ5IDYuNzk2MjMgMy44NDQ1MyA3LjkyMjI2TDE2LjA3NzcgMjAuMTU1NUMxNy4yMDM4IDIxLjI4MTUgMTkuMDI5NCAyMS4yODE1IDIwLjE1NTUgMjAuMTU1NUMyMS4yODE1IDE5LjAyOTQgMjEuMjgxNSAxNy4yMDM4IDIwLjE1NTUgMTYuMDc3N0wxNy4wNzc3IDEzIiBzdHJva2U9IiM0NTY1OTkiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4gPHBhdGggZD0iTTYgMTBMMTAgNiIgc3Ryb2tlPSIjNDU2NTk5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+IDxwYXRoIGQ9Ik0xNi4xIDIuMzA3MTlDMTYuMjYxIDEuODk3NiAxNi44Mzg1IDEuODk3NiAxNi45OTk0IDIuMzA3MTlMMTcuNDI5OCAzLjQwMjQ3QzE3LjQ3OSAzLjUyNzUyIDE3LjU3NzYgMy42MjY1MSAxNy43MDIyIDMuNjc1ODNMMTguNzkzNCA0LjEwNzhDMTkuMjAxNSA0LjI2OTM0IDE5LjIwMTUgNC44NDkgMTguNzkzNCA1LjAxMDU0TDE3LjcwMjIgNS40NDI1MkMxNy41Nzc2IDUuNDkxODQgMTcuNDc5IDUuNTkwODIgMTcuNDI5OCA1LjcxNTg3TDE2Ljk5OTUgNi44MTExNUMxNi44Mzg1IDcuMjIwNzQgMTYuMjYxIDcuMjIwNzQgMTYuMSA2LjgxMTE2TDE1LjY2OTcgNS43MTU4N0MxNS42MjA1IDUuNTkwODIgMTUuNTIxOSA1LjQ5MTg0IDE1LjM5NzMgNS40NDI1MkwxNC4zMDYxIDUuMDEwNTRDMTMuODk4IDQuODQ5IDEzLjg5OCA0LjI2OTM0IDE0LjMwNjEgNC4xMDc4TDE1LjM5NzMgMy42NzU4M0MxNS41MjE5IDMuNjI2NTEgMTUuNjIwNSAzLjUyNzUyIDE1LjY2OTcgMy40MDI0N0wxNi4xIDIuMzA3MTlaIiBzdHJva2U9IiM0NTY1OTkiLz4gPHBhdGggZD0iTTE5Ljk2NzIgOS4xMjk0NUMyMC4xMjgxIDguNzE5ODcgMjAuNzA1NyA4LjcxOTg3IDIwLjg2NjYgOS4xMjk0NUwyMS4wMjM1IDkuNTI4OEMyMS4wNzI3IDkuNjUzODUgMjEuMTcxMyA5Ljc1Mjg0IDIxLjI5NTkgOS44MDIxNUwyMS42OTM3IDkuOTU5NjVDMjIuMTAxOCAxMC4xMjEyIDIyLjEwMTggMTAuNzAwOSAyMS42OTM3IDEwLjg2MjRMMjEuMjk1OSAxMS4wMTk5QzIxLjE3MTMgMTEuMDY5MiAyMS4wNzI3IDExLjE2ODIgMjEuMDIzNSAxMS4yOTMyTDIwLjg2NjYgMTEuNjkyNkMyMC43MDU3IDEyLjEwMjIgMjAuMTI4MSAxMi4xMDIyIDE5Ljk2NzIgMTEuNjkyNkwxOS44MTAzIDExLjI5MzJDMTkuNzYxMSAxMS4xNjgyIDE5LjY2MjUgMTEuMDY5MiAxOS41Mzc5IDExLjAxOTlMMTkuMTQgMTAuODYyNEMxOC43MzIgMTAuNzAwOSAxOC43MzIgMTAuMTIxMiAxOS4xNCA5Ljk1OTY1TDE5LjUzNzkgOS44MDIxNUMxOS42NjI1IDkuNzUyODQgMTkuNzYxMSA5LjY1Mzg1IDE5LjgxMDMgOS41Mjg4TDE5Ljk2NzIgOS4xMjk0NVoiIHN0cm9rZT0iIzQ1NjU5OSIvPiA8cGF0aCBkPSJNNS4xMzMyIDE1LjMwNzJDNS4yOTQxNCAxNC44OTc2IDUuODcxNjcgMTQuODk3NiA2LjAzMjYxIDE1LjMwNzJMNi4xODk1MyAxNS43MDY1QzYuMjM4NjcgMTUuODMxNiA2LjMzNzI5IDE1LjkzMDYgNi40NjE4OCAxNS45Nzk5TDYuODU5NzUgMTYuMTM3NEM3LjI2NzgzIDE2LjI5ODkgNy4yNjc4MyAxNi44Nzg2IDYuODU5NzUgMTcuMDQwMUw2LjQ2MTg4IDE3LjE5NzZDNi4zMzcyOSAxNy4yNDY5IDYuMjM4NjcgMTcuMzQ1OSA2LjE4OTUzIDE3LjQ3MUw2LjAzMjYxIDE3Ljg3MDNDNS44NzE2NyAxOC4yNzk5IDUuMjk0MTQgMTguMjc5OSA1LjEzMzIgMTcuODcwM0w0Ljk3NjI4IDE3LjQ3MUM0LjkyNzE0IDE3LjM0NTkgNC44Mjg1MiAxNy4yNDY5IDQuNzAzOTMgMTcuMTk3Nkw0LjMwNjA2IDE3LjA0MDFDMy44OTc5OCAxNi44Nzg2IDMuODk3OTggMTYuMjk4OSA0LjMwNjA2IDE2LjEzNzRMNC43MDM5MyAxNS45Nzk5QzQuODI4NTIgMTUuOTMwNiA0LjkyNzE0IDE1LjgzMTYgNC45NzYyOCAxNS43MDY1TDUuMTMzMiAxNS4zMDcyWiIgc3Ryb2tlPSIjNDU2NTk5Ii8+IDwvZz4KDTwvc3ZnPg==");
  background-size: 20%;
  background-repeat: no-repeat;
  background-position: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px;
  min-height: 450px;
}

#preview:empty {
  margin-top: 0;
}

.constructor {
    input[type="range"] {
        width: 100%;
        height: 1px;
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #7d879b;
      }
      
      input[type="range"]:focus {
        outline: 0;
      }
      
      input[type="range"]::-moz-focus-outer {
        border: 0;
      }
      
      input[type="range"]::-webkit-slider-thumb {
        width: 12px;
        height: 12px;
        margin-top: -2px;
        background-color: #203156;
        border: 1px solid #40f3f7;
        border-radius: 1rem;
        -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        -webkit-appearance: none;
        appearance: none;
      
        @media (max-width: 767px) {
            width: 1.25rem;
            height: 1.25rem;
            margin-top: -0.65rem;
            margin-top: -5px;
        }
      }
}

.left, .right {
    width: 50%;

    @media (max-width: 767px) {
        width: 100%;
    }
}