﻿.PhotoSwiper {
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
.ActivitySwiper {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
.ActivitySwiper-slide{
    height: 100%;
    width: 100%;
}
.swiper-pagination {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 400px !important;
    left: unset !important;
    bottom: unset !important;
    margin-top: 9px;
}
.PhotoSwiper-pagination {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 328px !important;
    left: unset !important;
    bottom: unset !important;
    margin-top: 9px;
}
    .swiper-pagination-bullet {
        text-align: center;
        margin: 0 !important;
        line-height: 20px;
        font-size: 12px;
        opacity: 1;
        background: #BDBDBD;
        width: 8px;
        height: 8px;
        border-radius: 100px;
        transition: all 0.3s ease;
    }
.ActivitySwiper-pagination {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 400px !important;
    left: unset !important;
    bottom: unset !important;
    margin-top: 9px;
}

.swiper-pagination-bullet-active {
    background: #219FA8;
}

.anketaPhoto{
    width: 100%;
}
.moderatorWindow {
    padding: 16px !important;
    display: flex;
    margin-top: 8px;
    gap: 11px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
.ModeratorAvatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 4px;
    text-align: center;
    width: 88px;
    font-size: 16px;
    font-weight: 500;
    color: #26595D;
}
    .ModeratorAvatar img {
        width: 62px;
    }
.anketaTextareaBox {
    background: #D9D9D9;
    position: relative;
    height: 144px;
    width: 100%;
}
.anketaTextarea {
    padding: 4px;
    height: 122px !important;
    width: 100%;
    font-size: 16px;
    background: #F4F5F5;
    border-radius: 4px;
    border: 0;
    outline: 0;
    resize: none;
    overflow: hidden !important;
    overflow-y: hidden !important;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
    .anketaTextarea.readonly {
        -webkit-box-shadow: unset;
        -moz-box-shadow: unset;
        box-shadow: unset;
        background: transparent;
        pointer-events: none;
        padding: 0;
        height: unset;
        border-radius: 0;
        color: #3F3F3F;
        overflow: hidden;
        resize: none;
        line-height: 1.5; /* Единый межстрочный интервал */
        white-space: pre-wrap;
        word-wrap: break-word;
        min-height: calc(1.5em * 1); /* 1 строка минимально */
        max-height: calc(1.5em * 6); /* 6 строк максимум */
        
    }
    .anketaTextarea::placeholder {
        color: #BDBDBD;
    }
    .anketaTextarea.Adminred {
        color: #AB4E5F;
    }
.anketaInput {
    background: #D9D9D9;
    border: 0;
    outline: 0;
    color: #535353;
    padding: 0;
    line-height: 1.1;
    transition: width 0.2s ease;
    border: none;
    outline: none;
    background: transparent;
    min-width: 0;
    flex-grow: 1;
    width: auto;
    padding: 0;
}
    .anketaInput.readonly {
        background: transparent;
        border: none;
        outline: none;
        min-width: 0 !important; /* Переопределяем min-width */
        width: auto; /* Ширина будет устанавливаться скриптом */
        padding: 4px 8px; /* Желаемые отступы */
        box-sizing: content-box; /* Важно для правильного расчета ширины */
        max-width: 300px; /* Или любое другое значение */
    }
    .anketaInput-number, .anketaInput-email, .anketaInput-websites {
        width: 100%;
    }
/* Стиль для заблокированного инпута */
.anketaTagsbtn.locked {
    background-color: #f0f0f0;
    cursor: default;
}

/* Скрытие пустых readonly-тегов */
.tag-input-wrapper:has(.anketaTagsbtn.readonly[value=""]) {
    display: none;
}
.anketaTextarea-personalData {
    height: 119px;
    padding: 16px;
    font-size: 20px;
}
.anketaEditBtn {
    position: absolute;
    display: flex;
    gap: 4px;
    align-items: center;
    top: 8px;
    right: 8px;
    font-size: 16px;
    color: #53535399;
    text-decoration: underline;
}
.anketatagsCont{
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}
.anketaTagsbtn {
    transition: width 0.2s ease;
    box-sizing: border-box;
    resize: none;
    border: 0px;
    outline: 0px;
    text-align: center;
    line-height: 1.7;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    height: 34px;
    max-width: 270px;
    padding: 8px;
    min-width: 60px;
    background: #F4F5F5;
    color: #757575;
    font-size: 16px;
    font-weight: 800;
    caret-color: transparent;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
    .anketaTagsbtn.Adminred {
        background: #AB4E5F;
        color: white;
    }

.ActiveCardCrop{
    width: 772px !important;
    max-width: 1000px !important;
}
.ActivePhotoCrop {
    aspect-ratio: 4 / 3;
     height: unset !important; 
    min-height:unset !important;
}
.anketaTagsbtn.readonly {
    height: unset;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
    border-radius: 100px;
    padding: 4px 12px;
    color: #FFFFFF;
    background-color: #219FA8;
    line-height: unset;
    pointer-events: none;
    overflow: hidden;
}
    .anketaTagsbtn:hover {
        background: #898989;
        color: #BDBDBD;

    }
        .anketaTagsbtn:hover::placeholder {
            color: #BDBDBD;
        }
    .anketaTagsbtn[data-type="4"] {
        caret-color: auto;
    }
.anketaCounterText {
    position: absolute;
    bottom: 8px;
    right: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #BDBDBD;
}
    .anketaCounterText.readonly{
        display: none;
    }
.anketaSaveBtn {
    width: 330px;
    align-self: end;
}
.anketaRow {
    flex-direction: column;
}
    .anketaRow > * {
        padding: unset;
    }

.anketaAddCardBtn {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 12px;
    padding: 10px;
    width: 100%;
    background-color: #D9D9D9;
    font-size: 20px;
    color: #535353;
    cursor: pointer;
    transition: filter 0.3s ease
}
    .anketaAddCardBtn:hover {
        filter: brightness(0.9)
    }
    .anketaHeadcont {
        display: flex;
        justify-content: start;
        align-items: start;
        gap: 24px;
    }
.anketaHeadcont > div {
    position: relative;
}

.AddPhotoModal-header {

}
.AddPhotoModal-title {
    font-size: 16px;
    color: #26595D;
    font-weight: 800;
}
.AddPhotoCont {
    display: flex;
    width: 100%;
    height: unset;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    margin-bottom: 15px !important;
}
.anketaPhoto-img {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #F4F5F5;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 220px;
    color: #5A5956;
    font-size: 14px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
.addbtntxt {
    color: #BDBDBD;
    text-align: center;
}
.AddPhotoModal {
    width: 552px;
}
.AddPhotoGuide-tip {
    font-size: 10px;
    color: #A5A5A5;
}
.AddPhotoGuide-title {
    font-size: 16px;
    color: #26595D;
    align-self: start;
    font-weight: 800;
}
.AddPhotoGuide-content {
    font-size: 14px;
    font-weight: 300;
    color: #517A7D;
}
.AddPhotoContent {
    position: absolute;
    width: 100%;
    object-fit: cover;
}
.cropperModal{
    border-radius: 12px;
}
.downloadPhotoBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.ActivityCard {
    display: flex !important;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
    padding: 16px;
    background: #D9D9D9;
    transition: all 0.3s ease;
}
    .ActivityCard.readonly {
        padding: 16px 16px 32px 16px;
    }
    .ActivityCard.hidden {
        display: none !important;
    }
.ActivityCardTextarea {
    background: #EFEFEF;
}
.ActivityCardInput {
    background: #EFEFEF;
}
.anketaNameInput {
    font-size: 48px;
    font-weight: 900;
    color: #26595D;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 0;
    resize: none;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
    line-height: 1;
}
    .anketaNameInput::placeholder {
        color: #BDBDBD;
    }

.anketa-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}
.RuTeenBtn {
    height: auto;
}
.product-center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 548px
}
.AnketainputBox {
    background-color: #F4F5F5;
    flex: 1 1 calc(50% - 12px); /* 50% ширины минус половина gap (8px / 2 + небольшой запас) */
    min-width: 0; /* Чтобы input не вылазил за пределы */
    padding: 4px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
    .AnketainputBox img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        transition: opacity 0.2s;
    }
    .AnketainputBox.Inn{
        height: 32px;
        flex-basis: 66%;
    }
    .AnketainputBox.Date{
        flex-basis: 33%;
    }
    .AnketainputBox.readonly {
        background-color: transparent;
        pointer-events: none;
        -webkit-box-shadow: unset;
        -moz-box-shadow: unset;
        box-shadow: unset;
        flex: unset;
    }
    .AnketainputBox img.inactive {
        opacity: 0.3 !important; /* Используем !important как временное решение */
        filter: grayscale(0.8);
    }
.AdressInputBox {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    gap: 16px 16px;
    margin-right: 70px;
/*    margin-bottom: 27px;*/
}
    .AdressInputBox.readonly{
        display: none;
    }

.ActivityShowInputBox {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    gap: 27px 12px;
    margin-right: 70px;
}
    .ActivityShowInputBox.readonly {
        gap: 8px 12px;
    }
    .InnInputBox {
        position: relative;
        display: flex;
        justify-content: start;
        align-items: start;
        gap: 16px 12px;
        margin-right: 70px;
/*        margin-bottom: 27px;*/
    }
.InnInputBox.readonly {
    display: none;
}


.tag-input-wrapper {
    position: relative;
    display: inline-block;
}

.tagdropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    opacity: 0;
    margin-top: 4px;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    pointer-events: none;
}
    .tagdropdown.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.taglist {
    display: flex;
    flex-direction: column;
    align-items: start;
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 100%;
    transform-origin: top center;
}

    .taglist span {
        width: 100%;
        cursor: pointer;
        white-space: nowrap;
        padding: 8px;

    }

        .taglist span:hover {
            background-color: #f5f5f5;
        }
.newcard {
    display: none; /* По умолчанию новые карточки скрыты */
}

    .newcard:first-child {
        display: flex; /* Первую карточку показываем при необходимости */
    }
.newcard.readonly {
    display: none !important;
}


.ActivityCard {
    transition: all 0.3s ease;
    overflow: hidden;
}

.DeleteActivity {
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 5;
}

    .DeleteActivity:hover {
        transform: scale(1.1);
    }


    .AddActivityBtn.hidden {
        display: none !important; /* Полностью скрываем когда неактивна */
    }

.ChangeAccPhotoBtn {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 100;
    cursor: pointer;
    transition: transform 0.2s ease;
}
    .ChangeAccPhotoBtn:hover {
        transform: scale(1.1);
    }
    .ChangeAccPhotoBtn.readonly {
        display: none;
    }
.ChangeActPhotoBtn {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 100;
    cursor: pointer;
    transition: transform 0.2s ease;
}
    .ChangeActPhotoBtn:hover {
        transform: scale(1.1);
    }
    .ChangeActPhotoBtn.readonly {
        display: none;
    }

.DeletePhotoBtn {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 100;
    cursor: pointer;
    transition: transform 0.2s ease;
}
    .DeletePhotoBtn:hover {
        transform: scale(1.1);
    }

.stepbanner {
    display: flex;
    position: relative;
    width: 100%;
    padding: 0;
    max-width: 1032px;
    width: 100%;
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    background-color: #FFFFFF;
    transition: opacity 0.25s ease-out, height 0.35s cubic-bezier(0.65, 0, 0.35, 1), padding 0.35s cubic-bezier(0.65, 0, 0.35, 1), margin 0.35s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.2s ease-out;
    will-change: opacity, height; /* Оптимизация для браузера */
}
    .stepbanner.nonregistration {
        display: none;
    }
.stepinfo {
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.stepinfocont{
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 8px;
}
.steptextcont {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 12px;
    color: #517A7D;
}
.TitleStepText {
    color: #26595D;
    font-weight: 900;
    font-size: 24px;
}
.CloseStepBanner {
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
    .CloseStepBanner:hover {
        transform: scale(1.1);
    }

.dropdown-address {
    display: none;
    position: absolute;
    top: 40px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    max-height: 180px;
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .dropdown-address div {
        padding: 8px 12px;
        cursor: pointer;
    }

        .dropdown-address div:hover {
            background: #f5f5f5;
        }
.disabled-btn {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
.stub.readonly{
    pointer-events: none;
}
.ModeratorRefuseActivity{
    display: flex;
    flex-direction: column;
}
.ModeratorRefuseFix {
    display: flex !important;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
}

@media (max-width: 767px) {
    .PhotoSwiper-pagination {
        bottom: -16px !important;
    }
    .ActivitySwiper-pagination {
        bottom: -16px !important;
    }
    .PhotoSwiper {
        box-shadow: unset;
        -webkit-box-shadow: unset;
        -moz-box-shadow: unset;
        max-height: unset;
        max-width: unset;
        border-radius: 8px 8px 0 0;
    }
    .ChangeActPhotoBtn{
        right: unset;
        left: 12px;
    }
    .ActivitySwiper{
        width: 100%;
        aspect-ratio: 4/3;
        height: unset;
        border-radius: 8px 8px 0 0;
    }
    .activity-card-header{
        margin-bottom: 10px;
    }
    .ActivityCard {
        padding: 0;
    }
        .ActivityCard.readonly{
            padding: 0;
        }

    .ActiveCardCrop{
        width: calc(100% - 14px) !important;
    }
}
@media (min-width: 1200px) {
}
@media (min-width: 1380px) {
}
@media (min-width: 1920px) {
}
