/* 1) Глобальная модель размеров */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2) Базовые отступы страницы */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* 3) Адаптивные изображения */
img {
  max-width: 100%;
  height: auto;
}

/* 4) Шапка сайта */
.site-header {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* теперь логотип и текст будут прижаты слева */
  flex-wrap: wrap;
  padding: 10px;
  background-color: #fff;
}

.site-header span {
    color: #4A5A69;
}

/* небольшой отступ между логотипом и текстом */
.site-header span {
  margin-left: 10px;
}
.site-header a img {
  height: 40px;
  margin-right: 10px;
}
.site-header span {
  font-size: 1em;
}

/* 5) Заголовок страницы */
.heading-h1 {
  text-align: center;
  margin: 20px 10px;
  font-size: 1.75em;
}

/* Подзаголовки */
.heading-h2 {
  text-align: center;
  margin: 18px 9px 9px 9px;
  font-size: 1.6em;
}

.heading-h3 {
  text-align: center;
  margin: 18px 9px 5px 9px;
  font-size: 1.4em;
}

.heading-h2-oi {
    margin: 1.5rem 9px 18px 9px; /* top, right, bottom, left */
    text-align: center;
    font-size: 1.6em;
}

@media (min-width: 768px) {
    .heading-h2-oi {
        margin: 3rem 9px 18px 9px;
    }
}

/* 6) Форма и текстовый редактор */
textarea,
.trumbowyg-box {
  width: 100%;
  max-width: 1000px;
  margin: 20px auto;
  display: block;
  padding: 10px;
  font-size: 1em;
  line-height: 1.5;
  resize: both;
  overflow: auto;
}

/* Основной контейнер редактора */
.trumbowyg-box {
  position: relative;
  max-height: calc(100vh - 100px); /* Оставляем больше места для нижнего отступа */
  overflow-y: auto;
}

/* Контейнер для фиксированной панели */
.trumbowyg-fixed-container {
  position: relative;
}

/* Панель инструментов */
.trumbowyg-button-pane {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #cce7f9;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

/* Область редактирования */
.trumbowyg-editor {
  min-height: 200px;
  padding-top: 18px !important; /* Высота панели инструментов */
}

/* Дополнительные стили для нижней границы */
.trumbowyg-box {
  scroll-padding-bottom: 50px; /* Защищаем нижнюю границу */
}

/* 7) Кнопки */
.button-container {
  text-align: center;
  margin-top: 10px;
}

.button-container button {
  padding: 10px 20px;
  max-width: 300px;
  width: auto;
  cursor: pointer;
  font-size: 1em;

  background-color: #0383E3; /* Цвет по умолчанию */
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.button-container button:hover {
  background-color: #026ebc; /* На 10% темнее */
}

.copy-button.left-button {
  left: 10px;
  right: auto;
}


/* 8) Сообщения об ошибке */
.error-message {
  color: red;
  margin-top: 10px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.error-visible {
  opacity: 1;
}

/* 9) Уведомления */
p.notice {
  text-align: center;
  margin: 10px;
  font-size: 0.9em;
  color: #4A5A69;
}

p.notice img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

p.test {
  margin: 10px;
  font-size: 0.9em;
  color: #4A5A69;
}

/* 10) Информационный блок */
.info-block {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 10px;
  text-align: left;
}

/* 11) Аккордеон */
.accordion-wrapper {
  position: relative;
}
.accordion-container {
  overflow: hidden;
  position: relative;
  max-height: 4.2rem; /* высота показываемых элементов */
  transition: max-height 0.5s ease;
  color: #4A5A69;
}
.accordion-container.expanded {
  max-height: 2000px;
}
.fade {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), white);
  pointer-events: none;
}
.accordion-button {
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
  color: #007BFF;
  background: none;
  border: none;
  font-size: 16px;
  padding: 5px 10px;
}

/* 12) Медиа-запросы */
@media (max-width: 768px) {
  .info-block {
    padding: 0 5px;
  }
  textarea,
  .trumbowyg-box {
    width: 100%;
  }
  .button-container button {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 1.5em;
  }
  .site-header {
    flex-direction: column;
    text-align: center;
  }
  .button-container button {
    padding: 15px;
    width: 100%;
  }
}


/* Блок для смены регистра */
/* Основной контейнер */
.case-converter {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap; /* запрет на перенос */
  max-width: 1000px;
  margin: 0 auto 0;
}

/* Контейнер для каждого textarea */
.case-block {
  flex: 1;
  min-width: 0; /* предотвращает переполнение */
  position: relative;
}

/* Общие стили textarea */
.case-textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  font-size: 1em;
  line-height: 1.5;
  resize: vertical;         /* азрешить растягивание только по высоте */
  overflow-y: auto;         /* ертикальный скролл при переполнении */
  overflow-x: hidden;       /* отключить горизонтальный скролл */
  box-sizing: border-box;
}

/* Кнопка копирования */
.copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background-color: #cce7f9;
  color: #003a61; 
  border: 1px solid #0383E3;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}

/* Кнопки смены регистра — отличающаяся расцветка */
.case-buttons .case-button {
  background-color: #cce7f9; /* светло-синий фон */
  color: #003a61;            /* тёмно-синий текст */
  border: 1px solid #0383E3; /* обводка основным синим */
  transition: background-color 0.3s ease;
}

.case-buttons .case-button:hover {
  background-color: #b3daf7; /* чуть темнее при наведении */
}


.copy-button:hover {
  background-color: #b3daf7;
}


#inputText::placeholder,
#outputText::placeholder {
  /* Чтобы текст плейсхолдера визуально сместился вниз */
  line-height: 3.9;
}

#inputText,
#outputText {
  padding-top: 20px; /* Увеличиваем верхний отступ */
  line-height: 3.9;
}

.textarea-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.clear-button.bottom-left {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  background-color: #cce7f9;
  color: #003a61;
  border: 1px solid #0383E3;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}

.clear-button.bottom-left:hover {
  background-color: #b3daf7;
}



/* Мобильная адаптация: расположить текстовые окна вертикально */
@media (max-width: 768px) {
  .case-converter {
    flex-direction: column;
  }
}



/* Конвертер изображений */
.converter-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Стили для загрузки изображений */
.upload-area {
    border: 2px dashed #ccc;
    border-radius: 5px;
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
    transition: all 0.3s;
    position: relative;
}

.upload-area.highlight {
    border-color: #4CAF50;
    background-color: #f8fff8;
}

.upload-label {
    display: block;
    cursor: pointer;
}

.drag-text {
    display: block;
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.browse-text {
    display: inline-block;
    padding: 8px 15px;
    background: #4CAF50;
    color: white;
    border-radius: 4px;
    transition: all 0.3s;
    font-weight: bold;
}

.browse-text:hover {
    background: #45a049;
}

.formats-text {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #777;
}

#imageInput {
    display: none;
}

.preview-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.image-preview {
    width: calc(33.333% - 10px);
    min-width: 200px;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: white;
}

.image-preview img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
}

.image-info {
    padding: 10px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.image-info span:first-child {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Настройки конвертации */
.conversion-options {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.conversion-options h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    color: #333;
}

.option-group {
    margin-bottom: 15px;
}

.option-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #444;
}

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

.radio-group label {
    font-weight: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}

.size-options {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.size-input {
    flex: 1;
}

.size-input input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .upload-area {
        padding: 20px 10px;
    }
    
    .drag-text {
        font-size: 16px;
    }
    
    .image-preview {
        width: calc(50% - 8px);
    }
    
    .radio-group {
        gap: 10px;
    }
    
    .size-options {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .image-preview {
        width: 100%;
    }
    
    .converter-container {
        padding: 0 15px;
    }
    
    .upload-area {
        padding: 15px 10px;
    }
    
    .drag-text {
        font-size: 15px;
    }
    
    .browse-text {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    .formats-text {
        font-size: 13px;
    }
}

.site-footer {
    background-color: #f1f1f1;
    padding: 20px 10px;
    text-align: center;
    font-size: 0.95em;
    color: #4A5A69;
    margin-top: 40px;
    border-top: 1px solid #ddd;
}

.site-footer a {
    color: #0383E3;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* Подсчёт символов */
.char-count-container {
    display: flex;
    flex-direction: column; /* вертикально */
    gap: 10px; /* расстояние между полем, кнопкой и статистикой */
    max-width: 800px;       /* подстраивается под сайт */
    margin-top: 20px;
    margin-bottom: 10px;
}

.char-stats-block {
  flex: 0 0 20px;
  min-width: 150px;
  display: flex;
  align-items: flex-start;
}

.char-stats p {
  margin: 10px 0;
  font-size: 1em;
  line-height: 1.5;
}

.char-stats {
  font-size: 1em;
  line-height: 1.5;
  margin-top: 5px;
  display: flex;
  gap: 10px;          /* расстояние между элементами */
  flex-wrap: wrap;     /* на маленьких экранах можно переносить */
  align-items: center; /* выравнивание по центру */
}

.char-stats span {
  white-space: nowrap; /* чтобы "С пробелами: 123" не переносилось */
}

/* Мобильная адаптация: статистика под полем */
@media (max-width: 768px) {
  .char-count-container {
    flex-direction: column;
  }
  .char-stats-block {
    flex: 1 1 auto;
    margin-top: 10px;
  }
}