/* Універсальний стиль для label */
.form-label {
  display: inline-block;
  font-weight: 600;       /* Напівжирний — помітний, але не кричущий */
  font-size: 1rem;        /* Базовий розмір (16px) — змінюйте за потреби */
  line-height: 1.4;       /* Трохи більше міжряддя для читабельності */
  color: #007bff;         /* Темно-сірий — краще для очей, ніж чисто чорний */
     margin-bottom: 0px !important;
}

/* Додатково — виділення для required */
.form-label.required::after {
  content: ' *';
  color: #dc3545; /* Bootstrap-червоний (або свій) для зірочки */
  font-weight: normal;
}  

.spacer {
  height: 1rem; /* або більше */
}


.p-3 {
  padding: 0px !important;  
    
}

.section-info {
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-top: 10px !important;
}


/* Стиль для fieldset з заголовком-шапкою */
fieldset {
  border: 1px solid #007bff;
  border-radius: 10px;
  padding: 0;
  margin-bottom: 25px;
  background-color: #fff;
  position: relative;
}

/* Заголовок fieldset - примикає до верхньої рамки */
legend {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  background: #007bff;
  padding: 8px 15px;
  margin: 0;
  border-radius: 9px 9px 0 0; /* Закруглення тільки зверху */
  width: 100%;
  box-sizing: border-box;
  position: relative;
  top: -1px; /* Прижимаємо до верхньої рамки */
  left: -1px; /* Прижимаємо до лівої рамки */
  right: -1px; /* Прижимаємо до правої рамки */
  border: 1px solid #007bff;
  border-bottom: none; /* Прибираємо нижню рамку щоб з'єднати з fieldset */
}

/* Тіло fieldset */
.fieldset-body {
  padding: 15px;
  border-radius: 0 0 9px 9px; /* Закруглення тільки знизу */
  background-color: #fdfdfd;
}

/* Альтернативний варіант - якщо потрібно більш точне позиціонування */
fieldset.window-style {
  border: 1px solid #007bff;
  border-radius: 10px;
  padding: 0;
  margin-bottom: 25px;
  background-color: #fff;
  overflow: hidden; /* Щоб заголовок не виходив за межі */
}

fieldset.window-style legend {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  background: #007bff;
  padding: 8px 15px;
  margin: 0;
  width: calc(100% + 2px); /* Компенсуємо рамку */
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 9px 9px 0 0;
  border: none;
  display: block;
  position: relative;
}

/* Якщо потрібно додати іконку або додаткові елементи до заголовка */
legend::before {
  content: ""; /* Можна додати іконку тут */
}

/* Для required полів у заголовку */
legend.required::after {
  content: " *";
  color: #ffc107; /* Жовтий колір для кращої видимості на синьому фоні */
  font-weight: normal;
}



  .required::after {
    content: " *";
    color: red;
  }
  
  

.border {
  --bs-border-color: #007bff !important;
}


input[readonly] {
  background-color: #ddd;  /* світло-сірий */
  color: #999;             /* приглушений текст */
  cursor: not-allowed;
}



#toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 200px;
  max-width: 80%;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}





/* коли показується */
#toast.show {
  visibility: visible;
  opacity: 1;
}


.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25);
}

.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 0.25rem;
}


/* Основний стиль як у form-control */

.select2-container--default .select2-selection--single .select2-selection__rendered
{
  height: calc(1.5em + 0.75rem + 2px); /* типова висота input */
  padding-top: 5px;
  border: 1px solid #007bff;
  border-radius: 0.375rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.select2-container--default .select2-selection--single{
    border: none !important;
}

select2-search__field{
    border: 1px solid #007bff !important;
}

.select2-selection__arrow {
  
  transform: translateY(-15%);
  right: 1rem;
  zoom: 2;
  
}

.select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color:   #007bff transparent transparent transparent !important;
}


.select2-container--default .select2-results>.select2-results__options {
    max-height: 500px !important;
 
}




/* ─── pform additions ─────────────────────────────────────────────────────── */
.hp-field { display: none !important; }
#toast.show { visibility: visible !important; opacity: 1 !important; }
/* Відео — responsive 16:9 */
.dept-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.dept-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
#title_img { max-height: 80px; width: auto; }
#finalBlock .card { border-radius: 12px; }
#finalBlock code { font-size: 1.1rem; letter-spacing: 2px; }

/* ─── Відео: обрізка верхнього та нижнього chrome YouTube ─────────────────── */
.dept-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  height: 220px;          /* фіксована висота — змінюй під потреби */
  background: #000;
}
.dept-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: calc(100% + 130px);  /* більше контейнера → ховає шапку і панель */
  border: none;
  pointer-events: auto;
}

/* ─── Назва відділу #title_info ────────────────────────────────────────────── */
#title_info {
  color: #007bff;
}

/* ─── Роздільник fieldset-body ─────────────────────────────────────────────── */
.spacer {
  height: 1rem;
  border-bottom: 2px solid #92cbff;
  margin-bottom: 0.5rem;
}

/* ─── Notice confirm — плавне згортання ────────────────────────────────────── */
.notice-block {
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
  opacity: 1;
}
.notice-block.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ─── final_block — мобільний компакт ────────────────────────────────────── */

#finalBlock fieldset { margin-bottom: 0.75rem; }

/* Діагностичний рядок — компактний на мобільному */
#finalBlock .permit-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  padding: 6px 10px;
  background: var(--bs-light, #f8f9fa);
  border-radius: 6px;
  margin-bottom: 10px;
}
#fb_age_check,
#fb_cat_check,
#fb_permit_status {
  white-space: nowrap;
}

/* Код реєстрації — зменшений на мобільному */
#fb_code {
  font-size: clamp(13px, 3.5vw, 20px) !important;
  letter-spacing: clamp(1px, 0.5vw, 2px) !important;
  padding: 6px 8px !important;
}

/* Кнопки надіслати/скопіювати — рівна ширина на мобільному */
@media (max-width: 480px) {
  #fb_share_btn,
  #fb_copy_btn {
    flex: 1 1 0;
    font-size: 13px;
    padding: 6px 8px !important;
    justify-content: center;
  }
  #fb_share_btn span,
  #fb_copy_btn  span { font-size: 12px; }

  /* help кнопка — менша */
  #fb_help_btn { width: 28px !important; height: 28px !important; font-size: 13px !important; line-height: 28px !important; }

  /* escort notice компактніший */
  #escortNotice { font-size: 12px; padding: 8px 10px; }
  #reasonWrap textarea { font-size: 13px; }

  /* Permit fieldset компактніший */
  #permitSection .fieldset-body { padding: 8px 10px; }
  #permitSection .form-check { margin-bottom: 6px; }
  #permitSection .form-check-label { font-size: 13px; }
}

/* Flex row для кнопок коду */
#finalBlock .code-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
#finalBlock .code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
@media (max-width: 380px) {
  #finalBlock .code-row { flex-wrap: wrap; }
  #fb_code { width: 100%; text-align: center; }
}

/* ─── TG notice block ───────────────────────────────────────────────────── */
.tg-notice {
  background: #E3F2FD;
  border: 1px solid #90CAF9;
  border-radius: 10px;
  font-size: 12px;
  color: #333;
  line-height: 1.45;
}
.tg-link { color: #0277BD !important; }
.tg-link:hover { text-decoration: underline; }

@keyframes tg-fly {
  0%   { transform: translate(-18px, 8px) rotate(-30deg); opacity:0; }
  15%  { transform: translate(-2px, 0px) rotate(-15deg); opacity:1; }
  45%  { transform: translate(0px, -3px) rotate(0deg); opacity:1; }
  75%  { transform: translate(2px, -1px) rotate(8deg); opacity:1; }
  90%  { transform: translate(12px, -8px) rotate(20deg); opacity:.4; }
  100% { transform: translate(22px, -16px) rotate(28deg); opacity:0; }
}
@keyframes tg-rock {
  0%,100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
#tg-plane {
  animation: tg-fly 2.4s ease-in-out 0.3s forwards,
             tg-rock 0.4s ease-in-out 0.7s 2;
}

/* ─── Permit traffic lights ────────────────────────────────────────────── */
.permit-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
  padding: 6px 10px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 10px;
}
.permit-light {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,.12);
}
.permit-light.green  { background: #4CAF50; }
.permit-light.orange { background: #FF9800; }
.permit-info-text {
  font-size: 12px;
  color: #555;
  flex: 1 1 200px;
  line-height: 1.35;
}

/* ─── Checkbox border fix ────────────────────────────────────────────────── */
#finalBlock .form-check-input {
  border: 1.5px solid #adb5bd !important;
  background-color: #fff !important;
  width: 1.1em;
  height: 1.1em;
}
#finalBlock .form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* ─── final_block v1.8 ──────────────────────────────────────────────────── */
/* Checkbox border fix */
#finalBlock .form-check-input {
  border: 1.5px solid #6c757d !important;
  background-color: #fff !important;
  width: 1.1em; height: 1.1em;
  border-radius: 3px !important;
}
#finalBlock .form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* fieldset border color */
#finalBlock fieldset { border-color: #007bff !important; }

/* Світлофор spans */
.permit-info { display: flex; align-items: center; flex-wrap: wrap;
               gap: 2px 4px; padding: 6px 10px; background: #f8f9fa;
               border-radius: 6px; margin-bottom: 8px; }
.permit-dot  { font-size: 18px; line-height: 1; }
.permit-info-text { font-size: 12px; color: #555; flex: 1 1 150px; line-height: 1.35; }

/* Code box — десктоп: один рядок */
.code-top { align-items: center; }
.code-btns { flex-shrink: 0; }
.code-btn  { display: inline-flex; align-items: center; gap: 5px;
             padding: 7px 14px; font-size: 14px; white-space: nowrap; }

/* Мобільний: кнопки в окремий рядок, тільки іконки */
@media (max-width: 480px) {
  .code-top    { flex-wrap: wrap; }
  .code-btns   { order: 3; width: 100%; display: flex !important;
                 justify-content: center; gap: 12px; margin-top: 8px; }
  .code-btn    { width: 52px !important; height: 52px !important;
                 border-radius: 50% !important; padding: 0 !important;
                 justify-content: center; }
  .code-btn .btn-text { display: none; }
  .code-btn svg { width: 22px; height: 22px; }

  /* TG notice компактніший */
  .tg-notice { font-size: 11px; padding: 8px; }
  .tg-label  { font-size: 10px; }
}

/* ─── final_block v1.9 — code buttons fix ───────────────────────────────── */
/* Desktop: кнопки заповнені, нормальний радіус */
.code-btn {
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 14px;
  white-space: nowrap;
}
/* Mobile: круглі кнопки 52×52, тільки іконка */
@media (max-width: 480px) {
  .code-btns { justify-content: center; margin-top: 6px; }
  .code-btn {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }
  .code-btn .btn-text { display: none !important; }
  .code-btn svg { width: 22px; height: 22px; }
}

/* ─── final_block v2.0 — notices ─────────────────────────────────────────── */
.fb-notice-green {
  background: #d4edda;
  border: 1px solid #28a745;
  border-radius: 8px;
}
.fb-notice-yellow {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
}
.fb-notice-icon { font-size: 17px; flex-shrink: 0; line-height: 1.4; }

/* Help btn — жовтий з білим текстом */
#fb_help_btn { color: #fff !important; }
#helpModalOk { color: #fff !important; }
#fb_permit_btn { color: #fff !important; }
#escortNoticeOk { color: #fff !important; }


.notice-box {
    display: inline-block;
    padding: 12px 16px;
    background-color: #f8f1dc; /* світло-бежевий */
    border: 1px solid #d9b55a;
    border-radius: 6px;
    color: #5a4a1a;
    font-size: 14px;
    line-height: 1.5;
}

.notice-box::before {
    content: "⚠";
    color: #d39b00;
    font-weight: bold;
    margin-right: 8px;
}