/* =========================================
      PREMIUM QUIZ MODAL STYLES (6-OPTION GRID)
      ========================================= */

   /* Custom Radio Button Card Styling */
   .quiz-option-card {
       cursor: pointer;
       border: 2px solid rgba(0,0,0,0.05);
       transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
       background-color: #ffffff;
       box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.03);
   }
   
   .quiz-option-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
       border-color: rgba(0, 157, 220, 0.3);
   }

   /* Hide the actual radio input */
   .quiz-radio-input {
       position: absolute;
       opacity: 0;
       cursor: pointer;
   }

   /* Selected State Styling */
   .quiz-radio-input:checked + .quiz-option-card {
       border-color: var(--bs-primary);
       background-color: rgba(0, 157, 220, 0.03); 
       box-shadow: 0 10px 15px -3px rgba(0, 157, 220, 0.15);
   }
   
   /* Icon Default & Hover Styling */
   .quiz-icon {
       transition: transform 0.3s ease, color 0.3s ease;
   }
   
   /* Card Hover triggers Icon Success Color */
   .quiz-option-card:hover .quiz-icon {
       color: var(--bs-success) !important;
       transform: scale(1.15);
   }

   /* Active/Checked Icon State */
   .quiz-radio-input:checked + .quiz-option-card .quiz-icon {
       color: var(--bs-primary) !important;
       transform: scale(1.15);
   }

   /* Animation for smooth step transitions */
   .quiz-step {
       animation: fadeInStep 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
   
   @keyframes fadeInStep {
       from { opacity: 0; transform: translateY(15px); }
       to { opacity: 1; transform: translateY(0); }
   }