/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/* ===============================
   GLOBAL FONT
================================ */
body {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    color: #333;
  }
  
  /* ===============================
     NAVBAR / HEADER
     Paltech Blue: rgb(6, 65, 115)
  ================================ */
  .navbar,
  .navbar-default {
    background-color: rgb(255, 255, 255) !important;
    border-bottom: 2px solid rgb(6, 65, 115) !important;
  }
  
  .navbar a,
  .navbar-brand {
    color: rgba(0, 0, 0, .5) !important;
    padding-bottom: 0px;
  }
  
  .navbar a:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
  }
  
  .navbar a {
    position: relative;
    text-decoration: none;
  }
  
  .navbar a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.3s ease;
  }
  
  .navbar a:hover::after {
    width: 100%;
  }
  
  
  /* ===============================
     PRIMARY BUTTONS
  ================================ */
  .btn-primary {
    background-color: rgb(5, 55, 95);
    border-color: rgb(5, 55, 95);
    color: #ffffff;
  }
  
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: rgb(8, 83, 145) !important;
    border-color: rgb(8, 83, 145) !important;
  }
  
  
  /* ===============================
     SECONDARY BUTTONS
  ================================ */
  .btn-default {
    background-color: #f5f5f5;
    border-color: #ccc;
    color: #333;
  }
  
  /* ===============================
     PROGRESS BAR
  ================================ */
  .progress-bar {
    background-color: rgb(5, 55, 95)
  }
  
  /* ===============================
     LINKS
  ================================ */
  a {
    color: rgb(5, 55, 95)
  }
  
  a:hover {
    /* color: rgb(236, 122, 15); */
    color: rgb(5, 55, 95);
  }
  
  /* ===============================
     QUESTION TITLES
  ================================ */
  .question-title {
    font-weight: 600;
    color: rgb(5, 55, 95)
  }
  
  /* ===============================
     FOOTER
  ================================ */
  .footer {
    background-color: #f4f6f8;
    color: #555;
    padding: 15px;
    text-align: center;
    font-size: 13px;
  }
  
  
  /* ===============================
     Text Info
  ================================ */
  .text-info {
    --bs-text-opacity: 1;
    color: rgb(5, 55, 95) !important;
  }
  .text-primary {
    --bs-text-opacity: 1;
    color: rgb(5, 55, 95) !important;
  }
  
  /* =====================================================
     RADIO & CHECKBOX SELECTION COLOR
     Paltech Blue: rgb(6, 65, 115)
     ===================================================== */
  
  /* RADIO BUTTON - CHECKED */
  input[type="radio"]:checked + label::before,
  .custom-control-input:checked ~ .custom-control-label::before {
      background-color: rgb(5, 55, 95) !important;
      border-color: rgb(5, 55, 95) !important;
  }
  
  /* CHECKBOX - CHECKED */
  input[type="checkbox"]:checked + label::before,
  .custom-control-input:checked ~ .custom-control-label::before {
      background-color: rgb(5, 55, 95) !important;
      border-color: rgb(5, 55, 95) !important;
  }
  
  /* CHECK MARK COLOR */
  .custom-control-input:checked ~ .custom-control-label::after {
      filter: brightness(0) invert(1);
  }
  
  /* FOCUS STATE (OPTIONAL BUT RECOMMENDED) */
  input[type="radio"]:focus + label::before,
  input[type="checkbox"]:focus + label::before {
      box-shadow: 0 0 0 0.15rem rgba(6, 65, 115, 0.4);
  }
  .checkbox-item input[type=checkbox]:checked+label:after, .checkbox-item input[type=radio]:checked+label:after, body .answer-item label:after {
      accent-color: rgb(5, 55, 95) !important;
      background-color: rgb(5, 55, 95) !important;
  }
  
  /* =====================================================
     VALIDATION MESSAGE TEXT COLOR
     Ensure validation messages are visible on dark blue background
     ===================================================== */
  .bg-primary .text-white,
  .bg-primary .questionvalidcontainer,
  .bg-primary .em_num_answers,
  .bg-primary .emtip {
      color: #ffffff !important;
  }
  
  .bg-primary .em_num_answers span,
  .bg-primary .emtip span {
      color: #ffffff !important;
  }
  
  /* =====================================================
     HIDE QUESTION MARK ICON
     Remove the question mark icon that appears next to questions
     ===================================================== */
  .ls-questionhelp:before {
      display: none !important;
      content: none !important;
  }
  
  /* =====================================================
     BUTTON SELECTION COLOR
     Make selected buttons clearly visible and distinct from unselected
     Selected buttons will have a lighter blue background with bright border/glow
     ===================================================== */
  
  /* Selected state for btn-primary buttons - use lighter, brighter blue */
  .btn-check:checked + .btn-primary,
  .btn-check:active + .btn-primary,
  .btn-primary.active,
  .btn-primary:active {
      background-color: rgb(8, 83, 145) !important;
      border-color: rgb(8, 83, 145) !important;
      border-width: 3px !important;
      color: #ffffff !important;
      box-shadow: 0 0 0 0.25rem rgba(8, 83, 145, 0.6), 0 0 10px rgba(8, 83, 145, 0.8) !important;
      transform: scale(1.02) !important;
  }
  
  .btn-check:checked + .btn-primary:hover,
  .btn-check:active + .btn-primary:hover,
  .btn-primary.active:hover,
  .btn-primary:active:hover {
      background-color: rgb(10, 100, 175) !important;
      border-color: rgb(10, 100, 175) !important;
  }
  
  /* Selected state for btn-outline-secondary buttons - fill with bright color */
  .btn-check:checked + .btn-outline-secondary,
  .btn-check:active + .btn-outline-secondary,
  .btn-outline-secondary.active,
  .btn-outline-secondary:active {
      background-color: rgb(8, 83, 145) !important;
      border-color: rgb(8, 83, 145) !important;
      border-width: 3px !important;
      color: #ffffff !important;
      box-shadow: 0 0 0 0.25rem rgba(8, 83, 145, 0.6), 0 0 10px rgba(8, 83, 145, 0.8) !important;
      transform: scale(1.02) !important;
  }
  
  .btn-check:checked + .btn-outline-secondary:hover,
  .btn-check:active + .btn-outline-secondary:hover,
  .btn-outline-secondary.active:hover,
  .btn-outline-secondary:active:hover {
      background-color: rgb(10, 100, 175) !important;
      border-color: rgb(10, 100, 175) !important;
  }
  
  /* For button groups used in survey answers - ensure all variants are covered */
  .btn-group .btn-check:checked + .btn-primary,
  .btn-group .btn-check:active + .btn-primary,
  .btn-group .btn-primary.active,
  .btn-group .btn-primary:active {
      background-color: rgb(8, 83, 145) !important;
      border-color: rgb(8, 83, 145) !important;
      border-width: 3px !important;
      color: #ffffff !important;
      box-shadow: 0 0 0 0.25rem rgba(8, 83, 145, 0.6), 0 0 10px rgba(8, 83, 145, 0.8) !important;
      transform: scale(1.02) !important;
  }
  
  .btn-group .btn-check:checked + .btn-outline-secondary,
  .btn-group .btn-check:active + .btn-outline-secondary,
  .btn-group .btn-outline-secondary.active,
  .btn-group .btn-outline-secondary:active {
      background-color: rgb(8, 83, 145) !important;
      border-color: rgb(8, 83, 145) !important;
      border-width: 3px !important;
      color: #ffffff !important;
      box-shadow: 0 0 0 0.25rem rgba(8, 83, 145, 0.6), 0 0 10px rgba(8, 83, 145, 0.8) !important;
      transform: scale(1.02) !important;
  }
  
  /* Unselected buttons should remain dark navy blue (darker than selected) */
  .btn-check:not(:checked) + .btn-primary,
  .btn-check:not(:checked) + .btn-outline-secondary {
      background-color: rgb(5, 55, 95) !important;
      border-color: rgb(5, 55, 95) !important;
      border-width: 1px !important;
      color: #ffffff !important;
      box-shadow: none !important;
      transform: scale(1) !important;
  }
  
  /* Hover state for unselected buttons */
  .btn-check:not(:checked) + .btn-primary:hover,
  .btn-check:not(:checked) + .btn-outline-secondary:hover {
      background-color: rgb(6, 65, 115) !important;
      border-color: rgb(6, 65, 115) !important;
  }