/* Изменение основного цвета */
:root {
    --bs-primary: #05117c; /* Синий Bootstrap */
    --bs-secondary: #7e9cb8; /* Серый */
    --bs-success: #145e3c; /* Зеленый */
    --bs-danger: #831c26; /* Красный */
    --bs-warning: #FFC107; /* Желтый */
    --bs-info: #0DCAF0; /* Голубой */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

#id_captcha_1 {
    border: 1px solid gray !important; /* !important чтобы перебить Bootstrap */
    padding: 5px !important;
    border-radius: 4px !important;
}

.size-block-300x600 {
    max-width: 300px;
    max-height: 600px;
    overflow: hidden;
}

.size-block-200x300 {
    height: 300px;
    overflow: hidden;
}

.size-block-728x90 {
    width: 100%;
    max-width: 728px;
}

.navbar .nav-link {
    color: #ffffff !important;
}

.btn-outline-gray {
    color: #1f2023;
    border-color: #0d6efd;
}

.bg-light_blue {
    background: #d9e4ff;
}

.my_link {
    color: black; /* Цвет текста черный */
    text-decoration: none; /* Убираем стандартное подчеркивание */
    /*display: block; !* Ссылка занимает всю ширину контейнера *!*/
    width: 100%; /* Ширина 100% */
    padding-bottom: 5px; /* Отступ снизу для подчеркивания */
    position: relative; /* Относительное позиционирование для псевдоэлемента */
    margin: 5px;
}

.ph_color {
    background: #e57f00;
}

.my_link:hover {
    color: #e57f00;
}

.my_link:hover::after {
    /*content: ''; !* Псевдоэлемент для подчеркивания *!*/
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Начинаем с левого края */
    bottom: 0; /* Размещаем внизу */
    width: 100%; /* Ширина 100% */
    height: 2px; /* Высота подчеркивания */
    background-color: black; /* Цвет подчеркивания */
}

.divider {
    display: block; /* Делаем элемент блочным */
    width: 100%; /* Ширина на всю доступную область */
    height: 1px; /* Высота линии */
    background-color: black; /* Цвет линии */
    margin: 2px 2px; /* Отступы сверху и снизу */
}

/* Стили для активной ссылки */
.base-link.active {
    color: #e57f00 !important; /* оранжевый цвет для активной ссылки */
    font-weight: bold;
    /*transition: color 0.3s ease;*/
    text-decoration: underline;
}

.base-link:hover {
    color: #e57f00 !important; /* оранжевый цвет для активной ссылки */

}

.base-link-black:hover {
    color: #000000 !important; /* оранжевый цвет для активной ссылки */

}

.base-link.active:focus {
    color: #e57f00; /* оранжевый оранжевый для активной ссылки */
    font-weight: bold;
    /*border-bottom: #0fcb09;*/
}


.base-link {
    /*font-family: "DejaVu Serif", serif;*/
    font-size: 1.2rem;
    display: block;
    padding: 10px;
    color: #eceef0;
    text-decoration: none;
    /*transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;*/
}

.theme-gray {
    background-color: #05117c !important;
}

/* Убираем подчеркивание и меняем курсор при наведении */
.company-link {
    text-decoration: none !important; /* Убираем подчеркивание */
    color: inherit !important; /* Наследуем цвет текста */
    cursor: pointer; /* Меняем курсор на указатель */
}

/* Добавляем hover-эффект для карточки */
.company-link .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.company-link:hover .card {
    transform: translateY(-5px); /* Легкий подъем карточки */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Увеличиваем тень */
}

.card-hover {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.card-hover:hover {
    transform: scale(1.02);
    background-color: #ffffff; /* Цвет немного светлее желтого */
}

.card-hover a {
    text-decoration: none;
}

.card-hover .post-title:hover {
    text-decoration: underline;
}

/* Тач-таргеты: ссылка на пост — часто просто строка текста без отступов,
   на мобильном в это легко не попасть пальцем. Паддинг увеличивает
   кликабельную область, не раздувая сам текст (используется и на <a>
   напрямую, и на <p> внутри <a> — работает в обоих случаях). */
.post-title {
    display: block;
    padding: 6px 0;
}

/* Кнопка-гамбургер меню — единственная точка входа в навигацию на
   мобильном, должна быть не мельче рекомендуемого минимума 44x44px */
.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eye-icon {
    width: 15px;
    height: 15px;
    margin-bottom: 3px; /* Подгоняет иконку по высоте */
}

.form-group-confirm {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    /*font-weight: bold;*/
}

.form-group-confirm input[type="password"], input[type="email"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.image-container {
    margin-top: 5px;
    position: relative;
    width: 100%;
    background-size: cover;
}

.image-container img {
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background: rgba(0, 0, 0, 0.5);*/
    color: white;
    padding: 20px;
    border-radius: 10px;
    /*text-align: center;*/
}

.btn-cooper-warning {
    background-color: rgb(227, 127, 0); /* Оранжевый цвет */
    color: white; /* Белый текст */
    padding: 10px 20px;
    border: none;
    border-radius: 20px; /* Закругленные края */
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

.btn-cooper-warning:hover {
    background-color: rgb(200, 110, 0); /* Темнее при наведении */
    /* перебиваем глобальный a:hover (style.css), который красит текст ссылок
       в зелёный при наведении — на самой кнопке текст должен стать белым */
    color: white;
}

/* Секция, куда скроллится */
#target {
    margin-bottom: 100vh; /* Чтобы было куда скроллить */
    height: 500px;
    background-color: lightgray;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.watermark {
    /*position: fixed;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    opacity: 0.1;
    z-index: -1;
    width: 400px; /* Можно адаптировать */
    pointer-events: none; /* Чтобы не мешал кликам */
}

.article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

/* Размер шрифта из CKEditor5 (text-tiny/text-small/text-big/text-huge) —
   в редакторе эти классы стилизует django_ckeditor_5/dist/styles.css,
   но он подключён только внутри самого редактора, не на странице статьи,
   и там правила завязаны на класс ck-content, а не article-content.
   Значения взяты из того же styles.css, чтобы совпадало с тем, что
   автор видел в редакторе. */
.article-content .text-tiny {
    font-size: .7em;
}

.article-content .text-small {
    font-size: .85em;
}

.article-content .text-big {
    font-size: 1.4em;
}

.article-content .text-huge {
    font-size: 1.8em;
}

/* Аналогично таблицам — CKEditor5 после ручного изменения размера картинки
   пишет фиксированную ширину в пикселях прямо в style у figure.image.
   img внутри уже сжимается через .article-content img выше, но он считает
   свои 100% от родителя-figure, который сам искусственно растянут —
   ограничиваем сам figure, оставляя style="width:65%" и т.п. (относительные
   размеры) нетронутыми, так как max-width их не портит. */
.article-content figure.image {
    max-width: 100%;
}

/* Таблицы CKEditor5 (<figure class="table" style="width:...px">) — редактор
   пишет фиксированную ширину прямо в инлайн-стиль figure, из-за чего на
   мобильных таблица вываливается за экран. Перебиваем инлайн-стиль и даём
   горизонтальный скролл внутри таблицы на случай, если у отдельных колонок
   тоже стоит фиксированная ширина после ручного растягивания в редакторе. */
.article-content .table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
}

.article-content .table table {
    width: 100%;
}

.my-rounded-24 {
    border-radius: 24px;
!important;
}

/* Класс для изображения с затемнением */
.img-with-gradient {
    position: relative;
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    /*filter: brightness(0.9); !* Простое затемнение всего изображения *!*/
    aspect-ratio: 16/9;
}

.img-with-gradient:hover {
    filter: brightness(0.9); /* Затемнение при наведении */
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 3rem;
    overflow-y: hidden;
    background: white;
    border-bottom: 1px solid #e9ecef;
}

[data-tip] {
    position: relative;
    cursor: pointer;
}

[data-tip]::before {
    content: attr(data-tip);
    position: absolute;
    bottom: 120%;
    left: 35%;
    transform: translateX(-50%);
    background: #3067bc;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    min-width: 200px;
    max-width: 300px;
    white-space: pre-line; /* ← КЛЮЧЕВОЙ МОМЕНТ! */
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 100;
    text-align: left;
    line-height: 1.6;
}

[data-tip]::after {
    content: "";
    position: absolute;
    bottom: calc(120% - 6px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #222;
    opacity: 0;
    transition: opacity 0.3s;
}

[data-tip]:hover::before,
[data-tip]:hover::after {
    opacity: 1;
}

.radio-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Кнопки контроллера/сплайсера с доп. текстом (интерфейсы, цена) под
   названием — при выборе (btn-check:checked) Bootstrap красит фон кнопки
   в тёмный, но .text-muted красит текст в тот же приглушённый серый, что
   и на белом фоне, и на тёмном фоне он становится нечитаемым.
   Осветляем этот текст, только когда кнопка активна. */
.btn-check:checked + .btn-outline-dark .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}