/* Общие классы для кнопок */
.button {
    width: 110px; /* Базовая ширина */
    padding: 6px; /* Внутренние отступы */
    border-radius: 5px; /* Скругленные углы */
    text-align: center; /* Центрирование текста */
    cursor: pointer; /* Иконка курсора при наведении */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button:active{
    transform: scale(0.95); /* Легкое уменьшение */
}

/* Кнопка "Submit" */
.button-submit {
    width: 115px;
    height: 50px;
    align-self: flex-start;
    margin-left: 0px;
    margin-top: 0px;
    background-color: #337ab7; /* Синий цвет */
    color: #fff; /* Белый текст */
    border: none;
}

.button-submit:hover {
    background-color: #1d629e; /* Более темный синий при наведении */
}

/* Кнопка "Generate Password" */
.button-generate {
    width: 170px;
    align-self: center;
    background-color: #6c757d; /* Серый цвет */
    color: #fff;
    border: none;
    margin-right: -5px;
    margin-top: 25px;
}

.button-generate:hover {
    background-color: #5a6268; /* Темнее при наведении */
}

/* Поле для ввода пароля (textarea) */
.textarea-password {
    resize: both; /* Разрешаем изменение размера */
    min-height: 250px; /* Минимальная высота */
    width: 542px; /* Полная ширина колонки */
    max-width: 100%; /* Запрещаем превышать контейнер */
    border: 1px solid #ccc; /* Базовый цвет рамки */
    border-radius: 5px; /* Скругленные углы */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Плавный эффект при фокусе */
    line-height: 1.5;
}

.textarea-password:focus {
    outline: none; /* Убираем стандартное выделение */
    border-color: #337ab7; /* Темный синий */
    box-shadow: 0px 0px 8px rgba(0, 123, 255, 0.2); /* Подсвечивание рамки */
}
/* Выпадающий список */
.select-ttl {
    width: auto;
    min-width: 100px;
    margin-top: 0px;
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Поле ввода длины пароля */
.input-length {
    margin-top: 0px;
    width: 70px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Макеты строк */
.row-flex {
    display: flex;
    align-items: flex-start; /* Выравнивание по верхнему краю */
    gap: 10px; /* Расстояние между textarea и кнопками */
}

.column-flex {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Выравнивание по ширине */
    gap: 10px; /* Расстояние между элементами в колонке */
}


.page-header h1 {
    font-size: 36px;
    color: #333;
    text-align: left; /* Убедимся, что текст выравнен слева */
    margin-bottom: 5px;
    display: inline-block; /* Ограничиваем ширину до контента */
    max-width: 40%; /* Ограничиваем ширину заголовка или контейнера */
    margin: 0 auto; /* Центрируем */
}


/* Контейнер для Expire Time */
.expire-time-container {
    display: flex;
    flex-direction: column;
    gap: 50px; /* Расстояние между меткой и списком */
}

.expire-time-label {
    font-size: 14px; /* Размер текста */
    color: #aaa; /* Цвет текста */
    margin-bottom: 0px; /* Отступ под меткой */
    margin-right: 675px;
    white-space: nowrap;
    font-weight: normal; /* Убираем жирность */
}

.expire-time-select {
    width: 115px; /* Фиксированная ширина */
    min-width: 100px; /* Минимальная ширина */
    padding: 8px; /* Внутренние отступы */
    font-size: 14px; /* Размер текста */
    color: #333; /* Цвет текста */
    background-color: #fff; /* Белый фон */
    border: 1px solid #ccc; /* Рамка */
    border-radius: 5px; /* Скругленные углы */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Плавный эффект */
}


/* Контейнер для чекбокса и метки */
.checkbox-wrapper {
    margin-top: 32px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    gap: 0; /* Расстояние между чекбоксом и меткой */
    position: relative; /* Относительное позиционирование */
}

/* Скрытый стандартный чекбокс */
.checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0; /* Полностью скрываем */
    cursor: pointer; /* Указатель при наведении */
    width: 20px; /* Размер совпадает с кастомным чекбоксом */
    height: 20px;
    z-index: 1; /* Поверх кастомного элемента */
}

/* Кастомный чекбокс */
.checkbox-wrapper .checkbox-custom {
    width: 20px; /* Размер чекбокса */
    height: 20px;
    border: 2px solid #ccc; /* Базовая рамка */
    border-radius: 4px; /* Легкое скругление */
    background-color: #fff; /* Белый фон */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; /* Плавные эффекты */
}

/* Эффект при наведении */
.checkbox-wrapper .checkbox-custom:hover {
    transform: scale(1.1); /* Легкое увеличение */
    background-color: #333; /* Темный фон при наведении */
    border-color: #555; /* Темная рамка при наведении */
}

/* Галочка внутри кастомного чекбокса */
.checkbox-wrapper .checkbox-custom::after {
    content: "✔"; /* Символ галочки */
    color: #fff; /* Цвет галочки */
    font-size: 14px; /* Размер галочки */
    display: none; /* Скрываем по умолчанию */
    transition: transform 0.2s ease; /* Плавное появление */
}

/* Состояние активного чекбокса */
.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-custom {
    background-color: #337ab7; /* Синий фон при активации */
    border-color: #337ab7; /* Синяя рамка */
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-custom::after {
    display: block; /* Показываем галочку */
    transform: scale(1.2); /* Легкое увеличение галочки при активации */
}

/* Текст метки рядом с чекбоксом */
.checkbox-wrapper label {
    font-size: 14px;
    font-weight: normal;
    color: #555; /* Цвет текста */
    cursor: pointer; /* Указатель при наведении */
}


/* Жирный текст метки */
.bold-label {
    margin-top: 1px;
    font-size: 14px; /* Размер текста */
    color: #aaa;
    font-weight: normal; /* Убираем жирность */
}

/* Стиль для формы выбора специальных символов */
.special-symbols-form {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.special-symbols-form input {
    width: 247px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#special_symbols_container {
    height: auto; /* Высота остаётся неизменной */
    margin-top: 0; /* Отступ сверху */
    transition: visibility 0.3s ease; /* Плавное скрытие */
}

#special_symbols_container.visible {
    visibility: visible; /* Показываем содержимое */
}

#password-text {
    resize: none; /* Запрет изменения размера */
}

.slider {
    width: 300px; /* Установите желаемую ширину */
    height: 8px; /* Высота полосы слайдера */
    background: #ddd; /* Цвет полосы */
    border-radius: 4px; /* Скругление углов полосы */
    outline: none; /* Убираем рамку при фокусе */
    transition: background 0.3s ease; /* Плавный переход цвета при наведении */
    margin: 0 auto; /* Центрирование слайдера */
}

.slider:hover {
    background: #bbb; /* Цвет полосы при наведении */
}


.slider::-webkit-slider-thumb:hover {
    background: #1d629e; /* Цвет ползунка при наведении */
}

.slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #337ab7;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.slider::-moz-range-thumb:hover {
    background: #1d629e;
}

.slider::-ms-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #337ab7;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.slider::-ms-thumb:hover {
    background: #1d629e;
}

.slider-container .slider {
    width: 250px; /* Ограничьте ширину */
    height: 14px; /* Высота полосы слайдера */
    margin-left: 0;
    margin-top: 5px;
}
#slider {
    flex-shrink: 0; /* Запретить изменение размера */
    height: 70px;
    margin-bottom: 500px;
   	 /* Фиксированная высота контейнера */
    display: block; /* Убедиться, что Flexbox используется */
    align-items: center; /* Центрирование слайдера по вертикали */
}

/* Надпись "Length" */
label[for="password_length"] {
    color: #aaa; /* Светло-серый цвет */
    font-weight: normal; /* Убираем жирность */
}

/* Надпись "Characters remaining" */
.char-counter {
    color: #aaa; /* Светло-серый цвет */
    font-weight: normal; /* Убираем жирность */
}

/* Кнопка Reveal Secret */
#revealSecret {
    background-color: #337ab7;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавный переход цвета и размера */
}

/* Анимация при наведении */
#revealSecret:hover {
    background-color: #1d629e;
    transform: scale(1.05); /* Легкое увеличение */
}

/* Анимация при нажатии */
#revealSecret:active {
    transform: scale(0.95); /* Легкое уменьшение */
}

/* Скрытый секрет */
#secretContent {
    opacity: 0;
    transform: translateY(-10px); /* Смещение вверх для эффекта */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Плавное появление */
}

/* Показать секрет */
#secretContent.visible {
    opacity: 1;
    transform: translateY(0); /* Возвращаем в исходное положение */
}

/* Светло-серый текст для пояснений */
.light-text {
    color: #aaa; /* Светло-серый цвет */
    font-weight: normal; /* Убираем жирность */
    font-size: 14px; /* Небольшой размер */
    line-height: 1.6; /* Удобный межстрочный интервал */
}


/* Кнопка Copy to Clipboard на set-password.html */
.copy-clipboard-btn-set {
    margin-left: -80px;
    margin-top: -340px;
    width: 55px; /* Ширина кнопки */
    height: 25px; /* Высота кнопки */
    font-size: 12px; /* Размер текста */
    padding: 5px; /* Внутренние отступы */
    background-color: #337ab7; /* Основной цвет кнопки */
    color: #fff; /* Цвет текста */
    border: none; /* Убираем рамку */
    border-radius: 5px; /* Скругленные углы */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавный переход при наведении */
    visibility: hidden
}

/* Эффект при наведении */
.copy-clipboard-btn-set:hover {
    background-color: #1d629e; /* Более темный синий при наведении */
    transform: scale(1.05); /* Легкое увеличение кнопки */
}

/* Эффект при нажатии */
.copy-clipboard-btn-set:active {
    transform: scale(0.95); /* Легкое уменьшение кнопки */
}

/* Кнопка Copy to Clipboard на confirm-html */
.copy-clipboard-btn {
    margin-left: -18px;
    width: 65px; /* Ширина кнопки */
    height: 53px; /* Высота кнопки */
    font-size: 16px; /* Размер текста */
    padding: 10px; /* Внутренние отступы */
    background-color: #337ab7; /* Основной цвет кнопки */
    color: #fff; /* Цвет текста */
    border: none; /* Убираем рамку */
    border-radius: 5px; /* Скругленные углы */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавный переход при наведении */
}

/* Эффект при наведении */
.copy-clipboard-btn:hover {
    background-color: #1d629e; /* Более темный синий при наведении */
    transform: scale(1.05); /* Легкое увеличение кнопки */
}

/* Эффект при нажатии */
.copy-clipboard-btn:active {
    transform: scale(0.95); /* Легкое уменьшение кнопки */
}



/* Контейнер для переключателя темы */
.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: -5px; /* Отступ от текста */
}

/* Стиль для выравнивания "Share Secret" и переключателя */
.navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Разделяет элементы по краям */
}

/* Иконка темы */
.theme-icon {
    font-size: 20px;
    color: #333;
    transition: color 0.3s ease;
}

/* Скрытый чекбокс */
.theme-toggle {
    display: none;
}

/* Слайдер переключателя */
.theme-toggle-slider {
    width: 40px;
    height: 20px;
    background-color: var(--toggle-bg, #ccc); /* Переменная для фона */
    border-radius: 20px;
    top: 2px; /* Небольшое смещение вниз */
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* Лёгкая тень */
}

.theme-toggle-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Тень для ползунка */
}

/* Активное состояние переключателя */
.theme-toggle:checked + .theme-toggle-slider {
    background-color: #337ab7; /* Цвет при активном состоянии */
}

.theme-toggle:checked + .theme-toggle-slider::before {
    transform: translateX(20px);
}

/* При наведении */
.theme-toggle-slider:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); /* Акцент на наведении */
}

/* Темная тема: общий фон и текст */
body.dark-theme {
    background-color: #121212; /* Темный фон */
    color: #e0e0e0; /* Светлый текст */
}

body.dark-theme .navbar {
    background-color: #1f1f1f; /* Темная навигационная панель */
    border-color: #333;
}

/* Надпись "Set secret" */
body.dark-theme .page-header h1 {
    color: #e0e0e0; /* Сделать текст светлым */
}

/* Поля ввода */
body.dark-theme .form-control {
    background-color: #1e1e1e; /* Темный фон полей */
    color: #e0e0e0; /* Светлый текст */
    border: 1px solid #333; /* Темная рамка */
}

/* Поля ввода при фокусе */
body.dark-theme .form-control:focus {
    background-color: #2b2b2b; /* Чуть светлее при фокусе */
    border-color: #337ab7; /* Акцентный цвет рамки */
    box-shadow: 0 0 8px rgba(51, 122, 183, 0.5); /* Подсветка рамки */
}

body.dark-theme .form-control::placeholder {
    color: #888; /* Светло-серый для плейсхолдера */
}

body.dark-theme .textarea-password {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 1px solid #333;
}

body.dark-theme .button {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #444;
}

body.dark-theme .button:hover {
    background-color: #444;
    color: #fff;
}

body.dark-theme .theme-toggle-slider {
    background-color: #444; /* Темный фон переключателя */
}

body.dark-theme .theme-toggle-slider::before {
    background-color: #fff; /* Контрастный круг переключателя */
}

/* Кнопка "Generate URL" */
body.dark-theme .button-submit {
    background-color: #1d629e; /* Темно-синий */
    color: #fff;
}

body.dark-theme .button-submit:hover {
    background-color: #337ab7; /* Ярче при наведении */
}

/* Кнопка "Generate Password" */
body.dark-theme .button-generate {
    background-color: #444; /* Темный фон кнопки */
    color: #e0e0e0; /* Светлый текст */
}

body.dark-theme .button-generate:hover {
    background-color: #555; /* Немного светлее при наведении */
}

/* Поле "Length" */
body.dark-theme .input-length {
    background-color: #1e1e1e; /* Темный фон */
    color: #e0e0e0; /* Светлый текст */
    border: 1px solid #333; /* Темная рамка */
}

/* Выпадающий список "URL expire time" */
body.dark-theme .select-ttl {
    background-color: #1e1e1e; /* Темный фон */
    color: #e0e0e0; /* Светлый текст */
    border: 1px solid #333; /* Темная рамка */
}

body.dark-theme .select-ttl:focus {
    background-color: #2b2b2b; /* Чуть светлее при фокусе */
    border-color: #337ab7; /* Акцентный цвет рамки */
}

/* Поле "Custom special symbols" */
body.dark-theme #custom_symbols {
    background-color: #1e1e1e; /* Темный фон */
    color: #e0e0e0; /* Светлый текст */
    border: 1px solid #333; /* Темная рамка */
}

body.dark-theme #custom_symbols:focus {
    background-color: #2b2b2b; /* Чуть светлее при фокусе */
    border-color: #337ab7; /* Акцентный цвет рамки */
}

/* Полоса в заголовке */

body.dark-theme .page-header {
    border-bottom: 1px solid #333; /* Темная линия */
}

/* Общие стили для кнопки Copy to clipboard */
.copy-container {
    text-align: left; /* Выравниваем кнопку влево */
    margin-top: 85px; /* Поднимаем кнопку выше */
    margin-left: 20px;
}

#password-link {
    resize: none; /* Запрет изменения размера вручную */
    overflow-wrap: anywhere; /* Перенос текста */
    white-space: pre-wrap; /* Сохранение пробелов и переносов */
    height: auto; /* Высота подстраивается под текст */
    min-height: 50px; /* Минимальная высота для однородности */
}


@media (max-width: 768px) {
    .page-header h1 {
        font-size: 28px; /* Уменьшаем размер текста на мобильных */
    }

    .page-header {
        text-align: left; /* Убираем возможное выравнивание по центру */
        margin: 2px; /* Сброс внешних отступов */
        padding: 2px; /* Сброс внутренних отступов */
        margin-left: -1px;
    }

        /* Поле для ввода пароля (textarea) */
    .textarea-password {
        resize: both; /* Разрешаем изменение размера */
        min-height: 250px; /* Минимальная высота */
        width: 245px; /* Полная ширина колонки */
        max-width: 100%; /* Запрещаем превышать контейнер */
        border: 1px solid #ccc; /* Базовый цвет рамки */
        border-radius: 5px; /* Скругленные углы */
        transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Плавный эффект при фокусе */
        line-height: 1.5;
    }

    .textarea-password:focus {
        outline: none; /* Убираем стандартное выделение */
        border-color: #337ab7; /* Темный синий */
        box-shadow: 0px 0px 8px rgba(0, 123, 255, 0.2); /* Подсвечивание рамки */
    }

    .special-symbols-form input {
        width: 245px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-top: 70px;
        margin-left: -300px;
        gap: 5px;
    }

    #custom_symbols {
        height: auto; /* Автоматическая высота */
        min-height: 10px; /* Минимальная высота (2 строки) */
        max-height: 100px; /* Ограничение высоты */
        overflow-y: auto; /* Скролл при переполнении */
        resize: none; /* Запрещает изменение размера */
    }

    label[for="custom_symbols"] {
            display: none; /* Скрыть элемент */
    }

    #password_slider.slider {
        width: 245px; /* Ширина для мобильных */
        height: 22px; /* Высота полосы */
    }

    #password_slider.slider::-webkit-slider-thumb,
    #password_slider.slider::-moz-range-thumb,
    #password_slider.slider::-ms-thumb {
        width: 78px; /* Размер ползунка */
        height: 78px;
    }

    #special_symbols {
        width: 48px;
        height: 48px;
    }

    .checkbox-wrapper .checkbox-custom {
        margin-top: -7px;
        width: 34px; /* Размер чекбокса */
        height: 34px;
        border: 2px solid #ccc; /* Базовая рамка */
        border-radius: 4px; /* Легкое скругление */
        background-color: #fff; /* Белый фон */
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; /* Плавные эффекты */
    }

    .button-generate {
        width: 170px;
        align-self: center;
        background-color: #6c757d; /* Серый цвет */
        color: #fff;
        border: none;
        margin-left: -5px;
        margin-top: 25px;
    }

    .copy-clipboard-btn-set {
        visibility: visible; /* Делаем элемент видимым */
        opacity: 1; /* Полностью показываем элемент */
        margin-left: -80px;
        margin-top: -324px;
        width: 55px; /* Ширина кнопки */
        height: 25px; /* Высота кнопки */
        font-size: 12px; /* Размер текста */
        padding: 5px; /* Внутренние отступы */
        background-color: #337ab7; /* Основной цвет кнопки */
        color: #fff; /* Цвет текста */
        border: none; /* Убираем рамку */
        border-radius: 5px; /* Скругленные углы */
        cursor: pointer; /* Указатель при наведении */
        transition: background-color 0.3s ease, transform 0.2s ease; /* Плавный переход при наведении */
    }
    

    .copy-container {
        margin-top: 10px; /* Уменьшаем отступ */
        text-align: right; /* Перемещаем кнопку вправо */
    }

    .copy-clipboard-btn-set {
        font-size: 8px; /* Увеличиваем размер текста */
        padding: 8px 24px; /* Делаем кнопку больше */
    }

    /* Кнопка Copy to Clipboard на confirm.html */
    .copy-clipboard-btn {
        margin-top: 10px;
        margin-left: 0;
        width: 95px; /* Ширина кнопки */
        height: 53px; /* Высота кнопки */
        font-size: 16px; /* Размер текста */
        padding: 10px; /* Внутренние отступы */
        background-color: #337ab7; /* Основной цвет кнопки */
        color: #fff; /* Цвет текста */
        border: none; /* Убираем рамку */
        border-radius: 5px; /* Скругленные углы */
        cursor: pointer; /* Указатель при наведении */
        transition: background-color 0.3s ease, transform 0.2s ease; /* Плавный переход при наведении */
    }

    /* Эффект при наведении */
    .copy-clipboard-btn:hover {
        background-color: #1d629e; /* Более темный синий при наведении */
        transform: scale(1.05); /* Легкое увеличение кнопки */
    }

    /* Эффект при нажатии */
    .copy-clipboard-btn:active {
        transform: scale(0.95); /* Легкое уменьшение кнопки */
    }

    #password-link {
        resize: none; /* Запрет изменения размера вручную */
        overflow-wrap: anywhere; /* Перенос текста */
        white-space: pre-wrap; /* Сохранение пробелов и переносов */
        height: 80px; /* Высота подстраивается под текст */
        min-height: 50px; /* Минимальная высота для однородности */
    }

}