/* Стили для навигации страниц */

:root {
    /* Настройки размеров кнопки "Вернуться" */
    --back-button-height: auto;
    --back-icon-size: 18px;
    --back-button-font-size: 14px;
    --back-button-padding: 8px 12px;
    --back-button-gap: 8px;
    
    /* Размер стрелки в dropdown */
    --dropdown-arrow-size: 30px;
    
    /* Title/dropdown font variables */
    --title-font-size:  var(--fs-display-sm);
    --title-font-weight: var(--fw-medium);  
    --title-font-family: var(--font-family);
    --title-line-height: var(--lh-display-sm);
    
    /* Мобильные размеры*/
    --mobile-title-font-size: var(--fs-xl);
    --mobile-title-font-weight: var(--fw-semibold);
    --mobile-title-line-height: var(--lh-display-sm);
    
    /* Альтернативные размеры - раскомментируй и поменяй нужные: */
    /* --title-font-size: 36px; --title-font-weight: 700; /* 36px bold */
    /* --title-font-size: 48px; --title-font-weight: 700; /* 48px bold */
    /* --title-font-size: 60px; --title-font-weight: 700; /* 60px bold */
}

/* Примеры размеров кнопки - раскомментируй нужный */

/* Маленькая кнопка */
/*
:root {
    --back-button-height: 32px;
    --back-icon-size: 12px;
    --back-button-font-size: 12px;
    --back-button-padding: 0.3rem 0.8rem;
    --back-button-gap: 0.3rem;
}
*/

/* Большая кнопка */
/*
:root {
    --back-button-height: 48px;
    --back-icon-size: 20px;
    --back-button-font-size: 16px;
    --back-button-padding: 0.7rem 1.3rem;
    --back-button-gap: 0.7rem;
}
*/

/* Основной контейнер навигации */
.page-navigation {
    margin-bottom: 1.5rem; /* нормальный отступ */
    position: relative;
    z-index: 1; /* убеждаемся что навигация не перекрывает footer */
}

/* Убеждаемся что footer отображается */
.tilda-footer,
div[id*="rec"],
#rec819843395 {
    position: relative !important;
    z-index: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    clear: both !important;
    margin-top: 2rem !important;
    min-height: 100px !important; /* для отладки */
    background: #e9e9e9 !important; /* для отладки - должен быть виден */
}

/* Кнопка "Вернуться" */
.back-button-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem; /* нормальный отступ между кнопкой и dropdown */
    width: 100%;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: var(--back-button-gap);
    padding: var(--back-button-padding);
    text-decoration: none;
    color: #0073F0;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background: white;
    transition: all 0.2s ease;
    font-size: var(--back-button-font-size);
    font-weight: 500;
    min-height: var(--back-button-height); /* высота кнопки */
}

.back-button:hover {
    background: #F5F5F5;
    border-color: #0073F0;
    text-decoration: none;
    color: #0073F0;
}

.back-icon {
    width: var(--back-icon-size); /* размер иконки привязан к переменной */
    height: var(--back-icon-size); /* размер иконки привязан к переменной */
    min-width: var(--back-icon-size);
    min-height: var(--back-icon-size);
    flex-shrink: 0;
    object-fit: contain; /* сохраняет пропорции */
}

.back-text {
    color: inherit;
    white-space: nowrap; /* текст не переносится */
}

/* Выпадающий список заголовка */
.page-title-dropdown-container {
    width: 100%; /* полная ширина */
    max-width: 100%; /* максимальная ширина */
    min-width: 200px; /* минимальная ширина */
    display: flex;
    flex-direction: column;
    position: relative;
}

.page-title-dropdown {
    width: 100%;
    font-size: var(--title-font-size) !important;
    font-weight: var(--title-font-weight) !important;
    font-family: var(--title-font-family) !important;
    line-height: var(--title-line-height) !important;
    color: var(--color-gray-900); /* тот же цвет что у заголовка */
    margin-bottom: 0; /* убираем большой отступ */
    border-bottom: 2px solid var(--color-gray-200); /* та же полоска что у заголовка */
    padding-bottom: var(--sp-rem-16); /* тот же отступ снизу что у заголовка */
    background: transparent; /* убираем фон */
    border-top: none; /* убираем верхнюю рамку */
    border-left: none; /* убираем левую рамку */
    border-right: none; /* убираем правую рамку */
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0 center; /* стрелка справа без отступа */
    background-size: var(--dropdown-arrow-size); /* размер стрелки */
    padding-right: calc(var(--dropdown-arrow-size) + 0.5rem); /* отступ справа только для стрелки */
    transition: all 0.2s ease;
    min-height: auto; /* убираем минимальную высоту */
    box-sizing: border-box;
}

.page-title-dropdown:hover {
    color: #0073F0; /* синий цвет при наведении */
    border-bottom: 2px solid var(--color-gray-200); /* полоска остается */
    background-color: transparent; /* фон остается прозрачным */
}

.page-title-dropdown:focus {
    outline: none;
    color: #0073F0; /* синий цвет при фокусе */
    border-bottom: 2px solid var(--color-gray-200); /* полоска остается */
    background-color: transparent; /* фон остается прозрачным */
}

/* Переопределяем обычный заголовок чтобы он тоже использовал настраиваемые размеры */
body .layout .content .page-title,
body .content .page-title,
.content .page-title,
.page-title {
    font-size: var(--title-font-size) !important;
    font-weight: var(--title-font-weight) !important;
    font-family: var(--title-font-family) !important;
    line-height: var(--title-line-height) !important;
    color: var(--color-gray-900) !important;
    margin-bottom: var(--sp-rem-24) !important;
    border-bottom: 2px solid var(--color-gray-200) !important;
    padding-bottom: var(--sp-rem-16) !important;
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .page-navigation {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--color-gray-25);
        border-bottom: 1px solid var(--color-gray-200);
        padding: var(--sp-rem-12) var(--sp-rem-16);
        margin: 0 -16px var(--sp-rem-20) -16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .page-title-dropdown {
        font-size: var(--mobile-title-font-size) !important;  /* xs размер как в основном CSS */
        font-weight: var(--mobile-title-font-weight) !important;  /* bold как в основном CSS */
        font-family: var(--title-font-family) !important;
        line-height: var(--mobile-title-line-height) !important;
        padding: 0.75rem 1rem;
        padding-right: 3rem;
        background-size: 16px;
    }
    
    .back-icon {
        width: 14px;
        height: 14px;
    }
    
    .back-button {
        font-size: 13px;
        padding: 0.4rem 0.8rem;
        gap: 0.4rem;
    }
}

@media (max-width: 480px) {
    .page-title-dropdown {
        font-size: var(--mobile-title-font-size) !important;  /* xs размер */
        font-weight: var(--mobile-title-font-weight) !important;  /* bold */
        font-family: var(--title-font-family) !important;
        line-height: var(--mobile-title-line-height) !important;
        padding: 0.6rem 0.8rem;
        padding-right: 2.5rem;
        background-size: 14px;
    }
}

/* Принудительно применяем стили к опциям dropdown */
.page-title-dropdown option {
    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}