/* ==========================================================================
   Общие утилиты
   ========================================================================== */

/* 2. Каждый слайд (item) «приклеиваем» к верху и даём auto-высоту */
.t1186__item {
    height: auto !important;
    min-height: 0 !important;
}

/* 3. Сама карточка (circle) — auto-высота вместо 554px */
.t1186__card {
    height: auto !important;
    min-height: 0 !important;
}

.t1186__card_circle .t1186__bgimg {
    max-width: 72px;
    max-height: 72px;
    min-height: 72px;
}

/* Подсказки */
.tn-atom__tip {
    padding: 5px 10px !important;  /* 5px сверху/снизу, 10px слева/справа */
}

.tn-atom__tip_visible {
    display: inline-block !important;
    white-space: nowrap !important; /* Запрещает перенос текста */
    width: auto !important;
}

/* Пин-иконка */
.tn-atom__pin {
    font-size: 14px !important;
}

/* Универсальный z-index */
.uc-z {
    position: relative;
    z-index: 50 !important;
}

/* Ссылки */
a.link {
    transition: color 0.3s ease;
}

a.link:hover {
    color: #FF7E30;
}

/* Дополнительный ховер для ссылок внутри .t396__elem.link */
.t396__elem.link .tn-atom,
.t396__elem.link a {
    color: inherit !important;
    transition: color 0.3s ease !important;
}

.t396__elem.link:hover .tn-atom,
.t396__elem.link:hover a {
    color: #FF7E30 !important;
}


/* ==========================================================================
   Стили аккордеона (.t668) в блоках .uc-main / .uc-second / .uc-second-question
   ========================================================================== */

/* Обёртка аккордеона */
.t668__content {
    padding: 0 18px 0px 40px !important;
}

.t668__wrapper {
    box-sizing: border-box;
    transition: background-color 0.3s ease,
                border-color 0.3s ease;
}

/* Границы */
.uc-main .t668__wrapper {
    border: 3px solid #ff7e30;
}

.uc-second .t668__wrapper,
.uc-second-question .t668__wrapper {
    border: 3px solid #D3C8FF;
}

/* Состояние «открыто» */
.uc-main .t668__wrapper.is-opened {
    background-color: #FCE1D0;
    border-color: #ffffff !important;
}

.uc-second .t668__wrapper.is-opened,
.uc-second-question .t668__wrapper.is-opened {
    background-color: #E4DEFF;
    border-color: #ffffff !important;
}

/* Шильдик в заголовке */
.uc-main .t668__header {
    position: relative;
}

.uc-main .t668__header::before {
    content: "BEST SELLER";
    position: absolute;
    top: -14px;
    left: 0;
    display: inline-block;
    font-family: 'Hauora';
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 9px;
    background: #ff7e30;
    color: #000;
    border-radius: 100px;
    max-height: 14px;
    white-space: nowrap;
}

/* Заголовок услуги и цена */
.t668__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 3px;
    padding-left: 10px;
}

.t668__title::after {
    content: attr(data-price);
    margin-left: auto;
    padding-left: 12px;
    padding-right: 20px;
    font-size: 31px;
    font-weight: 400;
    color: #222;
}

/* Эм-блок в .uc-second-question */
.uc-second-question em {
    display: inline-block;          /* чтобы можно было задать padding и border-radius */
    padding: 0.8em 1.5em;           /* подкорректируйте под ваш вкус */
    background-color: #D7BFEF;
    color: #000;
    border-radius: 35px;
    font-style: normal;             /* убрать стандартный italic */
}

/* Иконки */
.uc-main .t668__wrapper.is-opened .t668__icon svg,
.uc-main .t668__wrapper.is-opened .t668__icon svg g {
    stroke: #ff7e30 !important;
}

.uc-second .t668__wrapper.is-opened .t668__icon svg,
.uc-second .t668__wrapper.is-opened .t668__icon svg g,
.uc-second-question .t668__wrapper.is-opened .t668__icon svg,
.uc-second-question .t668__wrapper.is-opened .t668__icon svg g {
    stroke: #D3C8FF !important;
}

/* Фон-круг при открытом состоянии */
.uc-main .t668__wrapper.is-opened .t668__icon .t668__circle,
.uc-second .t668__wrapper.is-opened .t668__icon .t668__circle,
.uc-second-question .t668__wrapper.is-opened .t668__icon .t668__circle {
    background-color: #ffffff !important;
}

/* Кнопки BOOK NOW */
.uc-main .book-now-btn,
.uc-second .book-now-btn {
    display: inline-block;
    font-family: 'PPFragment';
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    padding: 11px 20px;
    border-radius: 100px;
    transition: background-color 0.3s ease;
    margin-left: 20px;
    white-space: nowrap !important;
}

.uc-main .book-now-btn {
    background-color: #ff7e30;
    color: #000;
}

.uc-main .book-now-btn:hover {
    background-color: #ff9a5d;
}

.uc-second .book-now-btn {
    background-color: #BD7CFF;
    color: #000;
}

.uc-second .book-now-btn:hover {
    background-color: #D5ACFF;
}

/* Flex-обёртка текста и кнопки */
.t668__textwrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.t668__textwrapper .t668__text,
.t668__textwrapper .book-now-btn {
    width: 100%;
}

/* Левый столбец и блок цен */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    max-width: 60%;
}

.tech-price-block {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-shrink: 0;
    min-width: 300px;
}

.tech-tile {
    background-color: #ffe1cf;
    border-radius: 16px;
    padding: 16px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    min-width: 100px;
}

.tech-tile strong {
    display: block;
    margin-top: 5px;
    font-size: 20px;
}


/* ==========================================================================
   Медиа-запросы
   ========================================================================== */

/* max-width: 960px */
@media screen and (max-width: 960px) {
    .book-now-btn {
        margin-left: 0 !important;
        margin-bottom: 10px !important;
        font-size: 14px !important;
    }

    .t668__textwrapper {
        flex-direction: column;
        justify-content: flex-start; /* сбрасываем space-between */
        align-items: flex-start;
    }

    /* если у вашей кнопки класс, например, .t668__trigger-button */
    .t668__textwrapper .t668__trigger-button {
        margin-top: 16px;
        width: 100%;
    }

    .uc-main .t668__wrapper {
        border: 2px solid #ff7e30;
    }

    .uc-second .t668__wrapper,
    .uc-second-question .t668__wrapper {
        border: 2px solid #D3C8FF;
    }

    .t668__title::after {
        font-size: 20px;
    }

    .t668__icon {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
    }

    .t668__icon .t668__circle {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
    }

    .t668__icon .t668__lines {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .t668__icon .t668__lines svg {
        width: 16px !important;
        height: 16px !important;
        display: block;
    }

    .t668__icon svg {
        right: 18px !important;
        width: 32px !important;
        height: 32px !important;
    }

    .uc-main .t668__header::before {
        top: -13px;
        font-size: 11px;
        padding: 6px 9px;
        max-height: 14px;
    }
}

/* max-width: 640px */
@media screen and (max-width: 640px) {
    .t668__content {
        padding: 0 18px 0px 23px !important;
    }

    .t668__icon {
        right: 18px !important;
    }

    .t668__trigger-button {
        padding: 14px !important;
    }
}

/* max-width: 480px */
@media screen and (max-width: 480px) {
    /* Пустой блок для будущих корректировок */
}
