/* ========================================
   11. Виджеты сайдбара
======================================== */

.contact-card,
.booking-sidebar-widget,
.booking-card,
.hotel-info-card,
.help-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    border: var(--glass-border);
    border-radius: var(--card-radius);
    padding: var(--card-widget-padding);
    box-shadow: var(--shadow-sm);
}

.contact-card-title,
.widget-title,
.card-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-7);
    color: var(--dark);
    font-weight: var(--font-weight-semibold);
}

.contact-card-list {
    list-style: none;
}

.contact-card-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-card-list i {
    flex-shrink: 0;
    align-self: center;
    color: var(--primary-on-light);
    font-size: var(--text-xl);
    margin: 0;
    line-height: 1;
}

.contact-card-list strong {
    display: block;
    color: var(--dark);
    margin-bottom: 0.25rem;
}

.contact-card-list span,
.contact-card-list .contact-link {
    color: var(--gray);
    font-size: var(--text-sm);
}

.contact-card-list .contact-link {
    text-decoration: none;
    transition: var(--transition-fast);
}

.hotel-contact-messengers__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hotel-contact-messengers__links .social-link {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
}

.hotel-contact-messengers__links .social-link:not(.social-link--brand) {
    background: var(--primary-on-light);
    color: var(--white);
}

@media (hover: hover) {
    .hotel-contact-messengers__links .social-link:not(.social-link--brand):hover {
        color: var(--white);
        background: var(--primary-dark);
        transform: translateY(-1px);
    }

    .contact-card-list .contact-link:hover {
        color: var(--primary-on-light);
        text-decoration: underline;
    }
}

.hotel-contact-messengers__links .social-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--primary-dark);
    outline-offset: var(--focus-ring-offset);
}

.hotel-contact-messengers__links .social-link--brand:focus-visible {
    background: transparent;
}

.booking-card-header {
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-7);
    border-bottom: 2px solid var(--light);
}

.booking-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.price-amount {
    font-size: var(--section-title-size);
    font-weight: var(--font-weight-card);
    color: var(--primary-on-light);
}

.price-period {
    color: var(--gray);
    font-size: var(--text-base);
}

/* Описание отеля/номера: выравнивание по левому краю (остальные .help-card — по центру) */
.help-card:not(.hotel-description-card) {
    text-align: center;
}

.help-card.hotel-description-card {
    text-align: left;
}

.help-card.hotel-description-card .hotel-description,
.help-card.hotel-description-card .room-description,
.help-card.hotel-description-card .hotel-description--rich,
.help-card.hotel-description-card .room-description--rich {
    max-width: min(65ch, 100%);
}

.help-card.hotel-description-card ul,
.help-card.hotel-description-card ol {
    text-align: left;
}

.help-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: var(--icon-circle-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--section-title-size);
    color: var(--primary-dark);
}

.help-card .help-card-title {
    margin-bottom: 0.75rem;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-hero);
    color: var(--dark);
}

.help-card p {
    color: var(--gray);
    font-size: var(--text-sm);
    margin-bottom: 1.5rem;
}

.help-card-hours {
    margin-bottom: 1rem;
}

/* Sidebar: sticky на десктопе для удобства */
@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 5rem;
        align-self: flex-start;
    }
}

/* Sidebar: компактные карточки на мобильных */
@media (max-width: 991.98px) {
    .help-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 0.75rem;
        font-size: var(--text-xl);
    }
    
    .help-card .help-card-title {
        font-size: var(--text-lg);
        margin-bottom: 0.5rem;
    }
    
    .help-card p {
        margin-bottom: 1rem;
    }
    
    .contact-card,
    .booking-sidebar-widget,
    .booking-card,
    .hotel-info-card,
    .help-card {
        padding: 1.25rem;
    }
}

/* Sticky CTA: мобильные и планшеты (room-details.php, hotel-details.php) */
.sticky-booking-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    background: var(--white-alpha-95);
    backdrop-filter: var(--glass-blur-md);
    -webkit-backdrop-filter: var(--glass-blur-md);
    border-top: 1px solid var(--neutral);
    box-shadow: var(--elev-2);
    padding: var(--space-4) var(--space-5);
    transform: translateY(0);
    transition: transform var(--motion-base) var(--ease-standard);
}

.sticky-booking-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.sticky-booking-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sticky-price-amount {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-dark);
}

.sticky-price-period {
    font-size: var(--text-xs);
    color: var(--gray);
}

.sticky-booking-btn {
    flex-shrink: 1;
    max-width: 58%;
    min-height: 44px;
    padding: 0.65rem var(--space-5);
    font-weight: var(--font-weight-semibold);
    white-space: normal;
    line-height: 1.25;
    font-size: var(--text-sm);
    text-align: center;
}

.sticky-price-fallback {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-card);
    color: var(--gray);
    line-height: 1.25;
}

.sticky-booking-cta--no-price .sticky-booking-btn {
    max-width: 100%;
    flex: 1;
}

.sticky-booking-cta--no-price .sticky-booking-price {
    flex: 0 1 auto;
    max-width: 38%;
}

/* Отключить blur на мобильных / при экономии данных */
@media (max-width: 767.98px), (prefers-reduced-data: reduce) {
    .sticky-booking-cta {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--white);
    }
}

/* Показывать sticky CTA только на мобильных и планшетах */
@media (max-width: 991.98px) {
    .sticky-booking-cta {
        display: block;
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }

    .sticky-booking-cta-content {
        gap: 0.75rem;
    }

    /* Место справа под пузырь Tawk.to — не наезжает на «Узнать цену» */
    body:has(.sticky-booking-cta) .sticky-booking-cta-content {
        padding-right: calc(var(--space-5) + 3.5rem);
    }

    body:has(.sticky-booking-cta) .sticky-booking-btn {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Добавить отступ снизу только на страницах со sticky CTA */
    /* Использует :has() - поддержка: Chrome 105+, Safari 15.4+, Firefox 121+ */
    body:has(.sticky-booking-cta) {
        padding-bottom: calc(var(--layout-sticky-booking-clearance) + env(safe-area-inset-bottom, 0px));
    }

    /* Fallback для старых браузеров через специфический селектор страницы */
    /* Если :has() не поддерживается, padding-bottom не применится, но sticky CTA останется видимым */
}

/*
 * Tawk.to: z-index выше sticky CTA (--z-nav).
 * Не трогаем iframe[title*="chat"] и внутренние .tawk-button — иначе виджет пропадает.
 * Вертикальный отступ на mobile для hotel/room — Tawk_API.customStyle в public_analytics_seo.php.
 */
#tawk-bubble-container,
.tawk-min-container {
    z-index: calc(var(--z-loader) - 1) !important;
}

.help-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.help-card-actions .btn {
    flex: 1;
    min-width: 120px;
}

/* Карточка отеля в сайдбаре номера */
.hotel-info-card-image-link {
    line-height: 0;
}

.hotel-info-card-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.hotel-info-card-address,
.hotel-info-card-desc {
    line-height: var(--line-height-body);
}