/* ================================================
   RANEPA_ru — Фирменная тема анкет Президентской академии
   Дочерняя тема от fruity_twentythree
   Брендбук: Президентская академия, 2025
   Шрифты: Manrope + Montserrat (Google Fonts, бесплатные)
   ================================================ */

/* 1. ШРИФТЫ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Montserrat:wght@600;700&display=swap');

/* 2. CSS-ПЕРЕМЕННЫЕ БРЕНДБУКА */
:root {
  --ranepa-red: #CA0F3E;
  --ranepa-red-dark: #A00F33;
  --ranepa-navy: #29345B;
  --ranepa-dark: #171F29;
  --ranepa-light: #EDEBF2;
  --ranepa-ice: #D3E0E4;
  --ranepa-grey: #8B8A8F;
  --ranepa-white: #FFFFFF;
  --font-main: 'Manrope', Arial, sans-serif;
  --font-head: 'Montserrat', Arial, sans-serif;
  --bs-primary: #CA0F3E;
  --bs-primary-rgb: 202, 15, 62;
  --bs-secondary: #29345B;
  --bs-body-font-family: 'Manrope', Arial, sans-serif;
  --bs-body-color: #171F29;
  --bs-body-bg: #FFFFFF;
}

/* 3. БАЗОВАЯ ТИПОГРАФИКА */
body,
.survey-container,
.ls-answers,
.question-group,
.form-control,
label,
p {
  font-family: var(--font-main) !important;
  color: var(--ranepa-dark);
}

.large-heading,
h1,
h2,
h3,
.survey-name,
.group-title,
.question-title-container .question-text strong {
  font-family: var(--font-head) !important;
  font-weight: 700;
  color: var(--ranepa-navy);
}

/* 4. ШАПКА NAVBAR */
.navbar,
nav.navbar,
#outerframeContainer > nav {
  background-color: var(--ranepa-dark) !important;
  border-bottom: 3px solid var(--ranepa-red);
  padding-top: 12px;
  padding-bottom: 12px;
}

.navbar-brand img,
.navbar-brand svg {
  max-height: 44px;
  width: auto;
}

.logo-container {
  min-width: 160px;
  min-height: 44px;
  background: none;
}

.logo-container img.logo {
  max-height: 44px;
  width: auto;
  height: auto;
}

/* 5. ПРОГРЕСС-БАР */
.ls-progress-container {
  border-radius: 0;
}

.progress {
  height: 4px;
  background-color: var(--ranepa-ice);
  border-radius: 0;
  margin: 0;
}

.progress-bar {
  background-color: var(--ranepa-red) !important;
  border-radius: 0;
}

.ls-progress-percent {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  color: var(--ranepa-grey);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 6. КНОПКИ НАВИГАЦИИ */
.btn-primary,
#ls-button-submit,
button[id*="ls-button"],
.navigationbuttons .btn-primary {
  font-family: var(--font-main) !important;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background-color: var(--ranepa-red) !important;
  border-color: var(--ranepa-red) !important;
  color: var(--ranepa-white) !important;
  border-radius: 2px !important;
  padding: 11px 28px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus,
#ls-button-submit:hover {
  background-color: var(--ranepa-red-dark) !important;
  border-color: var(--ranepa-red-dark) !important;
  color: var(--ranepa-white) !important;
  box-shadow: none !important;
}

.btn-outline-secondary,
.navigator-button-l .btn,
button[id*="previous"],
.navigationbuttons .btn-outline-secondary {
  font-family: var(--font-main) !important;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background-color: transparent !important;
  border: 2px solid var(--ranepa-navy) !important;
  color: var(--ranepa-navy) !important;
  border-radius: 2px !important;
  padding: 10px 28px;
}

.btn-outline-secondary:hover,
.navigator-button-l .btn:hover {
  background-color: var(--ranepa-navy) !important;
  color: var(--ranepa-white) !important;
}

/* 7. RADIO / CHECKBOX */
.btn-check:checked + .btn,
.btn-check:checked + label,
.answer-item.selected label,
.radio-item input:checked + label {
  color: var(--ranepa-red) !important;
  font-weight: 600;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  accent-color: var(--ranepa-red);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .list-group-item {
  background-color: rgba(202, 15, 62, 0.08) !important;
  border-color: var(--ranepa-red) !important;
  color: var(--ranepa-red) !important;
}

body .answer-item label::after {
  background-color: var(--ranepa-red) !important;
}

/* 8. ТЕКСТОВЫЕ ПОЛЯ */
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
textarea {
  font-family: var(--font-main) !important;
  font-size: 15px;
  border: 1px solid var(--ranepa-ice) !important;
  border-radius: 2px !important;
  color: var(--ranepa-dark) !important;
  padding: 10px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
input[type="text"]:focus,
textarea:focus {
  border-color: var(--ranepa-red) !important;
  box-shadow: 0 0 0 3px rgba(202, 15, 62, 0.12) !important;
  outline: none;
}

/* 9. ГРУППЫ ВОПРОСОВ */
.question-group-header,
.group-title {
  border-left: 4px solid var(--ranepa-red);
  padding-left: 16px;
  margin-bottom: 24px;
}

.question {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--ranepa-ice);
}

.question:last-child {
  border-bottom: none;
}

/* 10. ОБЯЗАТЕЛЬНЫЕ ПОЛЯ */
.ls-mandatory-marker,
.asterisk,
span.mandatory {
  color: var(--ranepa-red) !important;
}

/* 11. ОШИБКИ ВАЛИДАЦИИ */
.has-error .form-control,
.has-error input,
.has-error textarea {
  border-color: var(--ranepa-red) !important;
}

.emtip,
.ls-error,
.text-danger,
.error-message {
  color: var(--ranepa-red) !important;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
}

/* 12. МАТРИЦА */
.table > thead > tr > th,
.ls-answers thead th {
  background-color: var(--ranepa-navy) !important;
  color: var(--ranepa-white) !important;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 13px;
}

.table-hover > tbody > tr:hover > td {
  background-color: rgba(202, 15, 62, 0.04) !important;
}

/* 13. WELCOME */
.welcome-container,
#welcomecontainer {
  padding: 40px 0;
}

.large-heading {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 16px;
}

.form-heading {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ranepa-dark);
}

/* 14. END PAGE */
.completed-wrapper,
#completed-notice {
  text-align: center;
  padding: 48px 24px;
}

.completed-wrapper h3,
#completed-notice h3 {
  font-family: var(--font-head);
  color: var(--ranepa-navy);
  font-weight: 700;
}

/* 15. ПОЛЕ «ДРУГОЕ» */
.other-text-input input,
input.other-input,
.other-field input {
  border: 1px solid var(--ranepa-ice) !important;
  border-radius: 2px !important;
  font-family: var(--font-main) !important;
  padding: 8px 12px;
  width: 100%;
  max-width: 440px;
}

.other-text-input input:focus,
input.other-input:focus {
  border-color: var(--ranepa-red) !important;
  box-shadow: 0 0 0 3px rgba(202, 15, 62, 0.12) !important;
}

/* 16. ФУТЕР */
#footer,
.survey-footer,
.ls-footer,
.footer {
  background-color: var(--ranepa-dark) !important;
  color: var(--ranepa-grey);
  font-family: var(--font-main);
  font-size: 12px;
  padding: 14px 24px;
  border-top: none !important;
}

#footer .ls-brand,
.powered-by-ls,
a[href*="limesurvey.org"],
a[href*="LimeSurvey"] {
  display: none !important;
}

/* 17. АДАПТИВНОСТЬ */
@media (max-width: 767px) {
  .btn-primary,
  .btn-outline-secondary,
  .navigationbuttons .btn {
    width: 100%;
    margin-bottom: 8px;
    font-size: 15px;
    padding: 13px 16px;
  }

  .large-heading {
    font-size: 1.5rem;
  }

  .question-group-header {
    padding-left: 12px;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand img,
  .navbar-brand svg {
    max-height: 36px;
  }
}

/* ---- МОБИЛЬНАЯ ТИПОГРАФИКА ---- */
@media (max-width: 767.98px) {

  /* Заголовок опроса на welcome */
  .large-heading,
  h1,
  .survey-name {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Заголовки групп вопросов */
  h2,
  .group-title,
  .question-group-header h2 {
    font-size: 1.1rem !important;
    line-height: 1.35 !important;
    word-break: break-word;
  }

  /* Текст вопросов */
  .question-text,
  .question-title-container {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Общий padding контейнера на мобиле */
  .survey-container,
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 480px) {
  .large-heading,
  h1,
  .survey-name {
    font-size: 1.2rem !important;
  }
}

#footer::after,
.survey-footer::after {
  content: 'Сервис опросов ПОЛЯ';
  display: block;
  font-family: var(--font-main);
  font-size: 11px;
  color: var(--ranepa-grey);
  text-align: center;
  padding: 8px 0;
}