/* ============================================================
   Модалка "Подробнее об акции"
   ============================================================ */

/* Попапы (appointment-popup и т.д.) должны быть выше модалки,
   чтобы при клике на "Записаться" внутри модалки попап был поверх. */
.popup {
    z-index: 1100;
}

.action-details {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}

.action-details.is-open {
    display: block;
}

/* ---------- Оверлей ---------- */
.action-details__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: ad-fade 0.2s ease-out;
}

/* ---------- Диалог ---------- */
.action-details__dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 640px;
    max-height: calc(100vh - 64px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ad-slide-up 0.25s ease-out;
}

/* ---------- Header ---------- */
.action-details__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 16px;
    border-bottom: 1px solid #D1D5DB;
    flex-shrink: 0;
}

.action-details__title {
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #111827;
}

.action-details__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #6B7280;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin: -6px -6px 0 0;
}

.action-details__close:hover {
    background: #F3F4F6;
    color: #111827;
}

.action-details__close svg {
    width: 20px;
    height: 20px;
}

/* ---------- Скролл-область ---------- */
.action-details__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    -webkit-overflow-scrolling: touch;
}

/* Лоадер */
.action-details__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

/* Ошибка */
.action-details__error {
    text-align: center;
    padding: 40px 20px;
    color: #6B7280;
    font-size: 15px;
}

/* ---------- Плашка срока действия (E5-B: edge tag справа) ---------- */
.action-details__period {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 0 0 0 16px;
    border-radius: 12px;
    background: rgba(59, 137, 228, 0.06);
    border: 1px solid rgba(59, 137, 228, 0.20);
    color: #4B5563;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    overflow: hidden;
    min-height: 62px;
}

/* Иконка календаря слева */
.action-details__period-icon {
    flex-shrink: 0;
    align-self: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3b89e4;
    color: #fff;
    padding: 7px;
    display: block;
}

/* Двухстрочный текст по центру */
.action-details__period-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    align-self: center;
    padding: 12px 0;
}

.action-details__period-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B7280;
}

.action-details__period-dates {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

/* Правый вертикальный тег «Осталось / 27 дней» */
.action-details__period-tag {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    background: #3b89e4;
    color: #fff;
    line-height: 1.05;
    min-width: 96px;
    text-align: center;
    border-radius: 0 11px 11px 0;
}

.action-details__period-tag-label {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    opacity: 0.75;
    margin-bottom: 3px;
}

.action-details__period-tag-value {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Состояния по срочности */
.action-details__period.is-warn .action-details__period-tag {
    background: #F59E0B;
}
.action-details__period.is-urgent .action-details__period-tag {
    background: #E9585B;
}

.action-details__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ---------- DETAIL_TEXT ---------- */
.action-details__text {
    font-size: 16px;
    line-height: 1.6;
    color: #4B5563;
}

/* Сброс браузерной нумерации — используем CSS-счётчик из main.css */
.action-details__text ol {
    list-style: none;
    padding-left: 0;
    counter-reset: list;
}

.action-details__text ol li {
    list-style: none;
}

.action-details__text p { margin: 0 0 1em; }
.action-details__text p:last-child { margin-bottom: 0; }
.action-details__text ul,
.action-details__text ol { margin: 0.75em 0; padding-left: 1.5em; }
.action-details__text ul li { list-style: disc; }
.action-details__text li { margin-bottom: 0.5em; }
.action-details__text h3,
.action-details__text h4 {
    font-weight: 600;
    color: #111827;
    margin: 1.2em 0 0.5em;
}
.action-details__text a {
    color: #3b89e4;
    text-decoration: underline;
}

/* ---------- Общий заголовок секции ---------- */
.action-details__section-title {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    color: #111827;
    margin-bottom: 14px;
}

/* ---------- Врачи ---------- */
.action-details__doctors-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ad-doctor {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #F3F4F6;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.ad-doctor:hover {
    background: #e9eef3;
}

.ad-doctor__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #cbe1f3 0%, #abcdeb 100%);
}

.ad-doctor__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.ad-doctor__info {
    min-width: 0;
    flex: 1;
}

.ad-doctor__name {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.2;
    color: #111827;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-doctor__spec {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.3;
}

/* ---------- Филиалы ---------- */
.action-details__clinics-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ad-clinic {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #D1D5DB;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.ad-clinic:hover {
    border-color: #C0D7F1;
    background: rgba(178, 206, 239, 0.1);
}

.ad-clinic__icon {
    flex-shrink: 0;
    color: #3b89e4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-clinic__icon svg {
    width: 20px;
    height: 20px;
}

.ad-clinic__info {
    min-width: 0;
    flex: 1;
}

.ad-clinic__label {
    font-size: 12px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.ad-clinic__address {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    color: #111827;
}

/* ---------- Footer ---------- */
.action-details__footer {
    flex-shrink: 0;
    padding: 16px 24px 20px;
    border-top: 1px solid #D1D5DB;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Цена */
.action-details__price {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.action-details__price-current {
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: #111827;
    line-height: 1;
}

.action-details__price-old {
    font-size: 15px;
    color: #6B7280;
    text-decoration: line-through;
}

.action-details__price-discount {
    display: inline-block;
    padding: 4px 10px;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

/* Кнопки */
.action-details__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.action-details__actions .action-card__btn {
    min-width: 0;
    margin: 0;
}

.action-details__actions .action-card__btn--outline {
    background: #fff;
    color: #3b89e4;
    border: 2px solid #B2CEEF;
}

.action-details__actions .action-card__btn--outline:hover {
    background: rgba(178, 206, 239, 0.2);
    filter: none;
}

/* ---------- Анимации ---------- */
@keyframes ad-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ad-slide-up {
    from { opacity: 0; transform: translate(-50%, -45%) scale(0.98); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- Мобильный ---------- */
@media (max-width: 767px) {
    .action-details__dialog {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        animation: ad-fade 0.2s ease-out;
    }

    .action-details__header {
        padding: 16px 16px 12px;
    }

    .action-details__title {
        font-size: 18px;
    }

    .action-details__scroll {
        padding: 16px;
        gap: 22px;
    }

    .action-details__doctors-list {
        grid-template-columns: 1fr;
    }

    .action-details__footer {
        padding: 12px 16px max(12px, env(safe-area-inset-bottom));
        gap: 10px;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.05);
    }

    .action-details__price-current {
        font-size: 22px;
    }

    .action-details__actions {
        gap: 8px;
    }
}

/* ---------- Блок с телефоном «Подробности у администраторов клиники» ---------- */
.action-details__phone-block {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(59, 137, 228, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(59, 137, 228, 0.15);
}

.action-details__phone-block-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3b89e4;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-details__phone-block-icon svg {
    width: 20px;
    height: 20px;
}

.action-details__phone-block-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 15px;
    color: #4B5563;
}

.action-details__phone-block-phone {
    display: inline-block;
    width: fit-content;
    font-size: 18px;
    font-weight: 600;
    color: #3b89e4;
    text-decoration: none;
    margin-top: 2px;
}

.action-details__phone-block-phone:hover {
    color: #336edc;
}