.question-container {
          border: 1px solid var(--form-element-border-color);
          border-radius: var(--border-radius, 0.25rem);
          margin-bottom: 2rem;
          overflow: hidden;
          width: 100%;
          
          min-height: 200px;
          display: flex;
          flex-direction: column;
          

          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          transition: box-shadow 0.3s ease, transform 0.2s ease;
        }

        .question-container:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transform: translateY(-2px);
        }

        .question-header {
          background-color: rgb(216, 239, 255);
          padding: 1.25rem;
          border-bottom: 1px solid var(--form-element-border-color);
          min-height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .question-container-old {
          border: 1px solid var(--form-element-border-color);
          border-radius: var(--border-radius, 0.25rem);
          margin-bottom: 1rem;
          overflow: hidden;
          width: 100%;
          min-height: 60px;
          display: flex;
          flex-direction: column;
        }

        .question-header-old {
          background-color: rgb(216, 239, 255);
          padding: 1rem;
          border-bottom: 1px solid var(--form-element-border-color);
          opacity: 60%;
          min-height: 60px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .question-header legend {
          font-weight: 600;
          color: var(--primary);
          margin-bottom: 0.5rem;
          font-size: 0.9rem;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .question-header h4 {
          margin: 0;
          line-height: 1.4;
          
        }

        .answer-options {
          padding: 1.5rem;
          background-color: rgb(239, 248, 252);
          flex-grow: 1;
        
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }

        .answer-options-image {
          display: flex;
          flex-wrap: nowrap;      
          gap: 1rem;
          padding: 2rem;
          background-color: rgb(239, 248, 252);
          overflow-x: hidden;      
        }
       .answer-options-image img {
          width: 100%;            
          flex-shrink: 1;      
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        .answer-options-image label:hover {
          background-color: rgba(187, 222, 251, 1);
          border-color: var(--primary);
          transform: translateX(4px);
        }

        .answer-options-image label:focus-within {
          outline: 2px solid var(--primary);
          outline-offset: 2px;
        }

        .answer-options-image label {
          flex: 1 1 0;            
          text-align: center;
          cursor: pointer;
          padding: 0.75rem;
          border: 1px solid transparent;
          border-radius: var(--border-radius, 0.25rem);
          transition: all 0.2s ease;
        }

        .answer-options label {
          display: flex;
          align-items: flex-start;
          padding: 0.75rem;
          border-radius: var(--border-radius, 0.25rem);
          transition: all 0.2s ease;
          cursor: pointer;
          border: 1px solid transparent;
          color: black;
          line-height: 1.5;
          min-height: 48px;
        }

        .answer-options label:hover {
          background-color: rgba(187, 222, 251, 1);
          border-color: var(--primary);
          transform: translateX(4px);
        }

        .answer-options label:focus-within {
          outline: 2px solid var(--primary);
          outline-offset: 2px;
        }

        .answer-options input[type="radio"] {
          margin-right: 0.75rem;
          margin-top: 0.125rem;
          flex-shrink: 0;
        }

  
        progress[data-questionnaire-target="progress"] {
          width: 100%;
          max-width: 600px;
          height: 12px;
          margin-top: 2rem;
          border-radius: 6px;
          overflow: hidden;
        }
        
        .black-text {
          color: black;
        }

        .answer-options label {
          color: black;
        }


        /* Dark mode adjustments */
        @media (prefers-color-scheme: dark) {
          .question-container {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
          }
          
          .question-container:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
          }
          
          .question-header {
            background-color: rgba(30, 48, 80, 1);
          }

          .question-header-old {
            background-color: rgba(30, 48, 80, 1);
          }

          .answer-options {
            background-color: rgba(23, 35, 56, 1);
          }

          .answer-options label:hover {
            background-color: rgba(39, 62, 98, 1);
          }

          .answer-options-image {
          background-color: rgba(23, 35, 56, 1);
        }

        .answer-options-image label:hover {
             background-color: rgba(39, 62, 98, 1);
          }

        .black-text {
          color: white;
        }

        .answer-options label {
          color: white;
        }
        }

        /* Animation improvements */
        .fade-in {
          animation: fadeInUp 0.4s ease-out;
        }

        @keyframes fadeInUp {
          from { 
            opacity: 0; 
            transform: translateY(20px); 
          }
          to { 
            opacity: 1; 
            transform: translateY(0); 
          }
        }


     @media (max-width: 600px) {
      .answer-options-image {
        display: grid;  
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.75rem;
        padding: 1rem;            
        overflow-x: visible;    
        justify-content: center;
        justify-items: center;
      }

      .answer-options-image label {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
      }

      .answer-options-image img {
        max-width: 100%;           
        height: auto;
        flex-shrink: 0;        
      }
    }