/*Colour Palette
Primary: #4f46e5 (Indigo)
Secondary: #06b6d4 (Cyan)
Success: #10b981 (Emerald)
Background: #f8fafc (Slate-50)
Text: #1e293b (Slate-800)
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Macondo&family=Oswald:wght@200..700&family=Tektur:wght@400..900&display=swap');

/* Global Styles */
/* CSS Variables - reusable color values throughout the stylesheet */
:root {
  --primary-color: #4ba3c3;
  --secondary-color: #ba324f;
  --success-color: #10b981;
  --background-color: #cce6f4;
  --text-color: #1e293b;
  --text-light: #64748b;
  --white: #ffffff;
  /* Box shadows for depth effect */
  --shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Reset default browser spacing and set consistent box model */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Include padding/border in element width */
}

body {
  font-family: "Tektur", sans-serif;
  /* Linear gradient background from top-left to bottom-right */
  background: linear-gradient(135deg, var(--background-color) 0%, #e2e8f0 100%);
  color: var(--text-color);
  line-height: 1.6; /* Improve text readability */
}

/* Landing Page Styles */
.landing-page {
  min-height: 100vh; /* Full viewport height */
  /* Diagonal gradient from primary to secondary color */
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  position: relative; /* Allows positioning of child elements */
  overflow: hidden; /* Hide any content that flows outside */
  display: block; /* Show by default */
}

/* Decorative overlay pattern using CSS-generated SVG */
.landing-page::before {
  content: ''; /* Required for pseudo-elements */
  position: absolute; /* Position relative to landing-page */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Inline SVG pattern for texture effect */
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3; /* Semi-transparent overlay */
}

.landing-content {
  position: relative; /* Stack above the background pattern */
  z-index: 2; /* Higher than background (z-index 1) */
  color: var(--white);
  animation: fadeInUp 1s ease-out; /* Smooth entrance animation */
}

.landing-content h1 {
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for readability */
}

.landing-content .lead {
  font-size: 1.25rem;
  opacity: 0.95; /* Slightly transparent for hierarchy */
  font-weight: 400;
  margin-bottom: 3rem;
}

/* Start Quiz Button */
.btn-start-quiz {
  background: var(--white);
  color: var(--primary-color);
  border: none;
  border-radius: 50px; /* Fully rounded edges */
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease; /* Smooth animation for all properties */
  box-shadow: var(--shadow);
  text-transform: uppercase; /* ALL CAPS text */
  letter-spacing: 0.5px; /* Space between letters */
  position: relative; /* For pseudo-element positioning */
  overflow: hidden; /* Hide shine effect overflow */
  text-decoration: none; /* Remove link underline */
  display: inline-block; /* Allow padding on inline element */
}

/* Button hover effects */
.btn-start-quiz:hover {
  transform: translateY(-2px); /* Lift button slightly */
  box-shadow: var(--shadow-lg); /* Larger shadow for depth */
  color: var(--primary-color);
  background: var(--white);
  text-decoration: none; /* Keep underline removed */
}

/* Button click effect */
.btn-start-quiz:active {
  transform: translateY(0); /* Return to original position */
}

/* Shine effect on hover */
.btn-start-quiz::before {
  content: ''; /* Required for pseudo-elements */
  position: absolute; /* Position relative to button */
  top: 0;
  left: -100%; /* Start completely to the left */
  width: 100%;
  height: 100%;
  /* White shine effect that moves across button */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s; /* Animate the movement */
}

/* Move shine effect across button on hover */
.btn-start-quiz:hover::before {
  left: 100%; /* Move completely to the right */
}

/* Quiz Section */
.quiz-section {
  min-height: 100vh; /* Full viewport height */
  padding: 2rem 0;
  background: var(--background-color);
  display: none; /* Hidden by default */
  position: relative;
}

/* CSS-only navigation: Show quiz section when URL contains #quiz */
.quiz-section:target {
  display: block; /* Make visible when targeted */
  animation: fadeInUp 0.6s ease-out; /* Smooth entrance */
}

/* Hide landing page when quiz is targeted - CSS sibling selector */
.quiz-section:target ~ .landing-page,
#quiz:target ~ #home {
  display: none; /* Hide sibling elements */
}

/* Show landing page by default and when home is targeted */
#home:target,
.landing-page:not(:target) { /* :not() means "when NOT targeted" */
  display: block;
}

/* Hide quiz section when home is targeted */
#home:target ~ #quiz {
  display: none; /* Hide quiz when home is active */
}

.quiz-container {
  background: var(--white);
  border-radius: 20px; /* Rounded corners */
  padding: 3rem;
  box-shadow: var(--shadow); /* Depth effect */
  margin-top: 2rem;
}

.quiz-container h2 {
  color: var(--primary-color);
  font-weight: 600;
}

/* Button styling for back button */
.btn-secondary {
  border-radius: 8px; /* Rectangular with rounded edges */
  font-weight: 600;
  transition: all 0.3s ease; /* Smooth hover effects */
  text-decoration: none; /* Remove link underline */
  display: inline-block; /* Allow padding on inline element */
}

/* Back button hover effect */
.btn-secondary:hover {
  text-decoration: none; /* Keep underline removed */
  transform: translateY(-1px); /* Slight lift effect */
}

/* Animations */
/* Fade in from bottom with slight upward movement */
@keyframes fadeInUp {
  from {
    opacity: 0; /* Start invisible */
    transform: translateY(30px); /* Start 30px below final position */
  }
  to {
    opacity: 1; /* End fully visible */
    transform: translateY(0); /* End at normal position */
  }
}

/* Gentle scaling animation for hover effects */
@keyframes pulse {
  0%, 100% {
    transform: scale(1); /* Normal size at start and end */
  }
  50% {
    transform: scale(1.05); /* Slightly larger in middle */
  }
}

/* Responsive Design - Adjust layout for different screen sizes */
/* Medium screens and smaller (tablets) */
@media (max-width: 768px) {
  /* Landing page improvements */
  .landing-content h1 {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important; /* Fluid scaling */
  }
  
  .landing-content .lead {
    font-size: clamp(1rem, 3vw, 1.2rem) !important; /* Fluid subtitle */
    line-height: 1.4; /* Better readability */
    padding: 0 0.5rem; /* Side padding for readability */
  }
  
  .landing-content {
    padding: 1rem; /* Better spacing on mobile */
  }
  
  /* Button improvements for better touch targets */
  .btn-start-quiz {
    font-size: 1rem; /* Smaller button text */
    padding: 0.875rem 2.5rem !important; /* Better touch target */
    margin-bottom: 1.5rem !important; /* More space below */
    min-height: 44px; /* iOS touch standard */
    width: auto; /* Prevent full width on very small screens */
    max-width: 280px; /* Prevent overly wide buttons */
  }
  
  /* Form improvements */
  .form-control {
    font-size: 1rem !important; /* Prevent zoom on iOS */
    padding: 0.75rem 1rem !important; /* Better touch targets */
    margin-bottom: 1rem !important; /* Space between form elements */
    border-radius: 8px !important; /* Consistent rounded corners */
  }
  
  /* Container and layout improvements */
  .quiz-container {
    padding: 1.5rem !important; /* Reduced padding on smaller screens */
    margin: 1rem !important; /* Consistent margins */
    border-radius: 15px !important; /* Slightly less rounded */
  }
  
  /* Navigation link improvements */
  .d-flex.gap-3 {
    gap: 1rem !important; /* Consistent spacing */
    flex-direction: column; /* Stack on mobile */
    align-items: center; /* Center buttons */
  }
  
  .d-flex.gap-3 .btn {
    width: 100%; /* Full width buttons on mobile */
    max-width: 250px; /* But not too wide */
    margin-bottom: 0.5rem; /* Space between buttons */
  }
}

/* Small screens (phones) */
@media (max-width: 576px) {
  .landing-content h1 {
    font-size: clamp(1.5rem, 8vw, 2rem) !important; /* Even smaller on tiny screens */
    margin-bottom: 1rem !important; /* Reduced margin */
  }
  
  .landing-content {
    padding: 0.5rem; /* Minimal padding on very small screens */
  }
  
  /* Ensure buttons don't get too small */
  .btn {
    min-height: 44px !important; /* Maintain touch targets */
    font-size: 0.95rem !important; /* Readable but compact */
  }
  
  /* Container adjustments for very small screens */
  .container {
    padding-left: 0.75rem !important; /* Reduced container padding */
    padding-right: 0.75rem !important;
  }
}

/* Header - Empty placeholder for future header styles */

/* Main Content - Empty placeholder for future main content styles */

/* Footer - Empty placeholder for future footer styles */


/* Quiz Carousel Fixes - Enable form interactions within carousel */
.carousel-item .form-check {
    pointer-events: auto; /* Allow clicks on form elements */
    z-index: 10; /* Stack above carousel controls */
    position: relative;
}

.carousel-item .form-check-input {
    pointer-events: auto; /* Enable radio button clicks */
    z-index: 20; /* Higher than form-check container */
}

.carousel-item .form-check-label {
    pointer-events: auto; /* Enable label clicks */
    z-index: 20; /* Higher than form-check container */
    cursor: pointer;
    display: block;
    padding: 8px 12px; /* Comfortable click area */
    margin-left: 8px; /* Space from radio button */
}

.carousel-item .form-check-label:hover {
    background-color: #f8f9fa; /* Light hover background */
    border-radius: 4px; /* Rounded hover effect */
}

/* Prevent carousel from interfering with form elements */
.carousel-inner {
    pointer-events: none; /* Disable carousel touch/click events */
    padding: 0 60px; /* Add horizontal padding to make room for navigation buttons */
    position: relative; /* Ensure proper positioning */
}

.carousel-next-disabled {
  background-color: grey !important;
  border-color: grey !important;
  opacity: 0.2 !important;
}

/* Quiz carousel container */
#quizCarousel {
    position: relative; /* Ensure proper positioning for navigation buttons */
    margin: 1rem 0; /* Add vertical spacing */
}

.carousel-item.active {
    pointer-events: auto; /* Re-enable for active slide only */
}

/* Quiz Page Styling - Match Landing Page Theme */
.quiz-page-body {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); /* Consistent gradient */
    min-height: 100vh; /* Full viewport height */
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Add pattern overlay like landing page */
.quiz-page-body::before {
    content: ''; /* Required for pseudo-elements */
    position: fixed; /* Stay in place during scroll */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Same grain pattern as landing page */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3; /* Semi-transparent overlay */
    z-index: -1; /* Behind all content */
}

/* Quiz Navigation Styling */
.quiz-navbar {
    background: rgba(255, 255, 255, 0.1) !important; /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Glass effect */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
}

.quiz-navbar .navbar-brand {
    color: var(--white) !important; /* White text */
    font-weight: 600; /* Semi-bold */
    text-decoration: none;
    transition: all 0.3s ease; /* Smooth hover animation */
}

.quiz-navbar .navbar-brand:hover {
    color: var(--white) !important; /* Maintain white on hover */
    transform: translateY(-1px); /* Subtle lift effect */
    text-decoration: none;
}

.quiz-navbar .nav-link {
    color: rgba(255, 255, 255, 0.8) !important; /* Semi-transparent white */
    font-weight: 500; /* Medium weight */
    transition: all 0.3s ease; /* Smooth hover animation */
}

.quiz-navbar .nav-link:hover {
    color: var(--white) !important; /* Full white on hover */
    transform: translateY(-1px); /* Subtle lift effect */
}

/* Responsive Navbar Toggler - Burger Menu */
.quiz-navbar .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.3); /* Semi-transparent white border */
    border-radius: 8px; /* Rounded corners */
    padding: 0.5rem 0.75rem; /* Comfortable padding */
    transition: all 0.3s ease; /* Smooth hover animation */
}

.quiz-navbar .navbar-toggler:hover {
    border-color: var(--white); /* Solid white border on hover */
    background: rgba(255, 255, 255, 0.1); /* Light background on hover */
}

.quiz-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3); /* Focus outline */
    border-color: var(--white); /* White border when focused */
}

/* Custom Burger Icon Styling */
.quiz-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.5em; /* Slightly larger icon */
    height: 1.5em; /* Slightly larger icon */
}

/* Mobile Navigation Styling */
@media (max-width: 991.98px) {
    .quiz-navbar .navbar-collapse {
        background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
        backdrop-filter: blur(10px); /* Glass effect */
        border-radius: 12px; /* Rounded corners */
        margin-top: 1rem; /* Space from navbar */
        padding: 1rem; /* Internal spacing */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    }
    
    .quiz-navbar .nav-link {
        padding: 0.75rem 1rem; /* More padding for touch targets */
        border-radius: 8px; /* Rounded link backgrounds */
        margin-bottom: 0.5rem; /* Space between links */
        transition: all 0.3s ease; /* Smooth hover animation */
    }
    
    .quiz-navbar .nav-link:hover {
        background: rgba(255, 255, 255, 0.2); /* Background on hover */
        transform: translateX(5px); /* Slide effect on mobile */
    }
}

/* Quiz Header Styling */
.quiz-header {
    background: transparent; /* No background - shows gradient */
    color: var(--white); /* White text */
    padding: 2rem 0; /* Vertical spacing */
    text-align: center; /* Center align text */
}

.quiz-header h1 {
    font-weight: 700; /* Bold heading */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for readability */
    margin-bottom: 1rem; /* Space below heading */
}

.quiz-header .lead {
    opacity: 0.95; /* Slightly transparent */
    font-size: 1.2rem; /* Larger subtitle text */
}

/* Quiz Main Content */
.quiz-main {
    position: relative; /* For z-index stacking */
    z-index: 1; /* Above background pattern */
    padding: 2rem 0; /* Vertical spacing */
}

/* Quiz Card Styling */
.quiz-card {
    background: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    border-radius: 20px; /* Rounded corners */
    box-shadow: var(--shadow-lg); /* Large shadow for depth */
    backdrop-filter: blur(10px); /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    overflow: hidden; /* Contain child elements */
    margin-bottom: 2rem; /* Space below card */
    margin: 0 60px 2rem 60px; /* Horizontal margins to create space for navigation arrows */
}

/* Mobile-first approach - override margins on small screens */
@media (max-width: 576px) {
    .quiz-card {
        margin: 0 0.5rem 2rem 0.5rem !important; /* Minimal margins on very small screens */
    }
}

/* Progress Bar Styling */
.quiz-progress {
    background: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
    border-radius: 10px; /* Rounded progress bar */
    overflow: hidden; /* Contain progress fill */
    margin-bottom: 2rem; /* Space below progress */
}

.quiz-progress .progress-bar {
    background: linear-gradient(45deg, var(--success-color), #22c55e); /* Green gradient */
    border-radius: 10px; /* Rounded progress fill */
    font-weight: 600; /* Bold text */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Text shadow for readability */
}

/* Quiz Question Styling */
.quiz-question-title {
    color: var(--primary-color); /* Primary brand color */
    font-weight: 600; /* Semi-bold */
    margin-bottom: 1rem; /* Space below title */
}

.quiz-question-text {
    color: var(--text-color); /* Dark text color */
    font-size: 1.1rem; /* Slightly larger text */
    font-weight: 500; /* Medium weight */
    margin-bottom: 2rem; /* Space below question */
    background: rgba(255, 255, 255, 0.8); /* Light background for question area */
    padding: 1.5rem; /* Padding around question text */
    border-radius: 12px; /* Rounded corners */
    border: 1px solid rgba(79, 70, 229, 0.1); /* Subtle border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Soft shadow */
    backdrop-filter: blur(5px); /* Light blur effect */
}

/* Form Check Styling - Quiz answer options */
.quiz-form-check {
    background: rgba(255, 255, 255, 0.9); /* Light white background */
    border: 2px solid rgba(79, 70, 229, 0.2); /* Visible primary color border */
    border-radius: 12px; /* Rounded corners */
    padding: 1rem; /* Internal spacing */
    margin-bottom: 1rem; /* Space between options */
    transition: all 0.3s ease; /* Smooth hover animation */
    cursor: pointer; /* Show clickable cursor */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    word-wrap: break-word; /* Force long words to wrap */
    overflow-wrap: break-word; /* Modern word wrapping */
    hyphens: auto; /* Add hyphens for better mobile reading */
}

.quiz-form-check:hover {
    background: rgba(255, 255, 255, 1); /* Full white on hover */
    border-color: rgba(79, 70, 229, 0.4); /* Stronger border on hover */
    transform: translateY(-2px); /* More pronounced lift effect */
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15); /* Enhanced shadow on hover */
}

.quiz-form-check-input:checked + .quiz-form-check-label {
    color: var(--primary-color); /* Primary color when selected */
    font-weight: 600; /* Bold when selected */
}

.quiz-form-check:has(.quiz-form-check-input:checked) {
    background: rgba(79, 70, 229, 0.08) !important; /* Force background on mobile */
    border-color: #4ba3c3 !important; /* Force border color on mobile */
    border-width: 3px; /* Thicker border when selected */
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.2); /* Stronger shadow when selected */
}

.quiz-form-check-label {
    color: var(--text-color); /* Default text color */
    font-weight: 500; /* Medium weight */
    margin-bottom: 0; /* Remove default margin */
    cursor: pointer; /* Show clickable cursor */
    width: 100%; /* Full width for better click area */
    word-wrap: break-word; /* Force text wrapping */
    white-space: normal; /* Allow text to wrap naturally */
    line-height: 1.4; /* Better line spacing for readability */
}

/* Carousel Navigation Buttons */
.carousel-control-prev,
.carousel-control-next {
    width: 45px; /* Slightly smaller button size */
    height: 45px; /* Slightly smaller button size */
    background: var(--primary-color); /* Primary color background */
    border-radius: 8px; /* Square buttons with rounded corners */
    opacity: 0.8; /* Semi-transparent by default */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Perfect vertical centering */
    transition: all 0.3s ease; /* Smooth hover animation */
    z-index: 10; /* Ensure buttons stay above content */
    border: 2px solid var(--white); /* White border for better visibility */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1; /* Full opacity on hover */
    transform: translateY(-50%) scale(1.05); /* Smaller scale to avoid overlap */
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); /* Add shadow on hover for square buttons */
}

.carousel-control-prev {
    left: 10px; /* Position inside container to avoid overlap */
}

.carousel-control-next {
    right: 10px; /* Position inside container to avoid overlap */
}

/* Quiz Action Buttons - Base styling for all quiz buttons */
.quiz-btn {
    border-radius: 50px; /* Fully rounded buttons */
    font-weight: 600; /* Semi-bold text */
    padding: 0.75rem 2rem; /* Comfortable padding */
    transition: all 0.3s ease; /* Smooth hover animation */
    box-shadow: var(--shadow); /* Depth shadow */
    border: none; /* Remove default border */
    text-transform: uppercase; /* All caps text */
    letter-spacing: 0.5px; /* Spaced letters */
}

.quiz-btn-primary {
    background: linear-gradient(45deg, var(--primary-color), #8b5cf6); /* Purple gradient */
    color: var(--white); /* White text */
}

.quiz-btn-primary:hover {
    transform: translateY(-2px); /* Lift effect on hover */
    box-shadow: var(--shadow-lg); /* Larger shadow on hover */
    color: var(--white); /* Maintain white text */
}

.quiz-btn-secondary {
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    color: var(--primary-color); /* Primary color text */
    border: 2px solid var(--primary-color); /* Primary color border */
}

.quiz-btn-secondary:hover {
    background: var(--primary-color); /* Primary background on hover */
    color: var(--white); /* White text on hover */
    transform: translateY(-2px); /* Lift effect on hover */
}

.quiz-btn-info {
    background: linear-gradient(45deg, var(--secondary-color), #0ea5e9); /* Blue gradient */
    color: var(--white); /* White text */
}

.quiz-btn-info:hover {
    transform: translateY(-2px); /* Lift effect on hover */
    box-shadow: var(--shadow-lg); /* Larger shadow on hover */
    color: var(--white); /* Maintain white text */
}

/* Results Section - Quiz answer explanations */
.quiz-results {
    background: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    border-radius: 15px; /* Rounded corners */
    padding: 2rem; /* Internal spacing */
    margin-top: 1rem; /* Space above results */
    box-shadow: var(--shadow); /* Depth shadow */
    backdrop-filter: blur(10px); /* Glass effect */
}

.quiz-results h5 {
    color: var(--primary-color); /* Primary color heading */
    font-weight: 600; /* Semi-bold */
    margin-bottom: 1rem; /* Space below heading */
    font-size: clamp(1rem, 3vw, 1.25rem); /* Responsive text sizing */
}

.quiz-results ul {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
}

.quiz-results li {
    background: rgba(var(--success-color), 0.1); /* Light green background */
    border-left: 4px solid var(--success-color); /* Green left border */
    padding: 1rem; /* Internal spacing */
    margin-bottom: 1rem; /* Space between items */
    border-radius: 8px; /* Rounded corners */
    word-wrap: break-word; /* Handle long text on mobile */
    line-height: 1.4; /* Better readability */
}

/* Leaderboard Styling */
.rank-badge {
    font-size: 1.2rem; /* Larger emoji size */
    margin-right: 0.5rem; /* Space between badge and number */
}

.rank-number {
    font-weight: 600; /* Semi-bold rank numbers */
    color: var(--primary-color); /* Primary color for rank */
}

.score-badge {
    background: rgba(var(--primary-color), 0.1); /* Light primary background */
    color: var(--primary-color); /* Primary color text */
    padding: 0.25rem 0.75rem; /* Compact padding */
    border-radius: 12px; /* Rounded badge */
    font-weight: 600; /* Semi-bold */
    font-size: 0.9rem; /* Slightly smaller text */
}

.percentage-badge {
    color: white !important; /* White text for all percentage badges */
    padding: 0.25rem 0.75rem; /* Compact padding */
    border-radius: 12px; /* Rounded badge */
    font-weight: 600; /* Semi-bold */
    font-size: 0.9rem; /* Slightly smaller text */
}

/* Leaderboard table hover effects */
.table-hover tbody tr:hover {
    background-color: rgba(var(--primary-color), 0.05) !important; /* Light primary on hover */
    transform: translateY(-1px); /* Subtle lift effect */
    transition: all 0.2s ease; /* Smooth animation */
}

/* Trophy and medal styling for top 3 */
.table-warning {
    background-color: rgba(255, 193, 7, 0.2) !important; /* Gold background */
}

.table-secondary {
    background-color: rgba(108, 117, 125, 0.2) !important; /* Silver background */
}

.table-info {
    background-color: rgba(13, 202, 240, 0.2) !important; /* Bronze background */
}

/* Responsive leaderboard table */
@media (max-width: 768px) {
    /* Table responsiveness */
    .table-responsive {
        font-size: 0.875rem; /* Smaller text on mobile */
        border-radius: 12px; /* Rounded corners */
        overflow: hidden; /* Clean edges */
    }
    
    /* Leaderboard header improvements */
    .quiz-header h1 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important; /* Fluid scaling */
        margin-bottom: 0.5rem !important;
    }
    
    .quiz-header .lead {
        font-size: clamp(0.9rem, 3vw, 1.1rem) !important; /* Fluid subtitle */
        margin-bottom: 1rem !important;
    }
    
    .quiz-header {
        padding: 1rem 0 !important; /* Reduced padding */
    }
    
    /* Badge improvements for better readability */
    .rank-badge {
        font-size: 1rem; /* Smaller emoji on mobile */
        padding: 0.25rem 0.5rem; /* Better spacing */
    }
    
    .score-badge, .percentage-badge {
        padding: 0.25rem 0.75rem !important; /* Better touch targets */
        font-size: 0.85rem !important; /* Readable but compact */
        margin: 0.125rem !important; /* Space between badges */
        border-radius: 6px !important; /* Consistent rounding */
    }
    
    /* Table cell improvements */
    .table td, .table th {
        padding: 0.75rem 0.5rem !important; /* Better spacing on mobile */
        vertical-align: middle !important; /* Center content */
        word-wrap: break-word; /* Handle long usernames */
    }
    
    /* Username column adjustments */
    .table td:first-child {
        font-weight: 600; /* Emphasize usernames */
        max-width: 120px; /* Prevent overly wide usernames */
        overflow: hidden; /* Hide overflow */
        text-overflow: ellipsis; /* Add ... for long names */
        white-space: nowrap; /* Keep on one line */
    }
    
    /* No scores message improvements */
    #noScoresMessage {
        padding: 2rem 1rem !important; /* Better spacing */
        font-size: 1rem !important; /* Readable size */
    }
    
    /* Action buttons in leaderboard */
    .btn {
        padding: 0.75rem 1.5rem !important; /* Better touch targets */
        font-size: 0.9rem !important; /* Compact but readable */
        margin: 0.25rem !important; /* Space between buttons */
        border-radius: 8px !important; /* Consistent rounding */
    }
}

/* Mobile Responsiveness for Quiz - Tablet and phone optimizations */

/* Disable labels once answer has been chosen */
.disabled-label {
  pointer-events: none;
  opacity: 0.5;
  
}
.disabled-label:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Adds colors to correct/incorrect answers */
.correct-answer > label{
  color: green !important;
}
.correct-answer {
  border: 2px solid green !important;
}
.incorrect-answer > label {
  color: red !important;
}
.incorrect-answer {
  border: 2px solid red !important;
}

/* Custom Score Badge Styling - Matches gradient background */
.score-badge .badge {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important; /* Blue gradient to match background */
    border: 2px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); /* Blue glow effect */
    transition: all 0.3s ease; /* Smooth transitions */
    backdrop-filter: blur(10px); /* Glass effect */
}

.score-badge .badge:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; /* Slightly darker on hover */
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); /* Enhanced glow on hover */
    transform: translateY(-1px); /* Subtle lift effect */
}

/* Mobile Responsiveness for Quiz */
@media (max-width: 768px) {
    /* Fix quiz card margins for mobile - remove excessive side margins */
    .quiz-card {
        margin: 0.5rem !important; /* Override desktop margins completely */
        border-radius: 15px;
        padding: 1rem; /* Add internal padding for content */
    }
    
    .quiz-header h1 {
        font-size: 1.5rem; /* Smaller heading on mobile */
    }
    
    .quiz-header .lead {
        font-size: 0.9rem; /* Smaller subtitle on mobile */
    }
    
    /* Fix quiz question text container for mobile */
    .quiz-question-text {
        font-size: 1rem !important; /* Smaller text size */
        padding: 1rem !important; /* Reduced padding */
        margin-bottom: 1.5rem !important; /* Less margin */
        line-height: 1.4; /* Better line spacing */
    }
    
    /* Fix answer option boxes for mobile */
    .quiz-form-check {
        padding: 0.75rem !important; /* Better touch target */
        margin-bottom: 0.75rem !important; /* Reduced spacing */
        border-width: 1px !important; /* Thinner border on mobile */
        word-wrap: break-word; /* Force text wrapping */
        overflow-wrap: break-word; /* Ensure long words break */
    }
    
    .quiz-form-check-label {
        font-size: 0.9rem !important; /* Smaller text for better fit */
        line-height: 1.3 !important; /* Tighter line spacing */
        word-wrap: break-word; /* Force text wrapping */
        white-space: normal !important; /* Allow text wrapping */
        hyphens: auto; /* Add hyphens for long words */
    }
    
    /* Fix navigation buttons for mobile */
    .carousel-control-prev,
    .carousel-control-next {
        width: 30px; /* Smaller navigation buttons */
        height: 30px;
        background: rgba(79, 70, 229, 0.9) !important; /* Ensure color loads */
    }
    
    .carousel-control-prev {
        left: 2px; /* Position closer to edge */
    }
    
    .carousel-control-next {
        right: 2px; /* Position closer to edge */
    }
    
    /* Remove excessive carousel padding on mobile */
    .carousel-inner {
        padding: 0 35px; /* Less padding for navigation buttons */
    }
    
    /* Force background colors to load on mobile */
    .quiz-section {
        background: linear-gradient(135deg, #4ba3c3 0%, #ba324f 100%) !important;
        min-height: 100vh;
    }
    
    /* Ensure progress bar is visible on mobile */
    .quiz-progress {
        margin-bottom: 1rem;
        height: 8px; /* Thinner on mobile */
    }
    
    /* Better button sizing for mobile */
    .quiz-btn, .btn {
        padding: 0.75rem 1.5rem !important; /* Better touch targets */
        font-size: 0.9rem !important;
        min-height: 44px; /* iOS touch target recommendation */
        border-radius: 8px;
    }
}

/* Instructions Section Styles */
/* Instructions Section Styles - Condensed */
.instructions-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  display: none;        /* Hidden by default - only show when navbar button clicked */
  visibility: hidden;   /* Completely hidden from screen readers and layout */
  opacity: 0;          /* Transparent for smooth fade animations */
  transition: opacity 0.5s ease; /* Smooth fade in/out effect */
}

.instructions-section .card {
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.instructions-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.instructions-section .card-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  border: none;
}

.instruction-card {
  padding: 1.5rem;
  background: white;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  height: 100%;
  animation: fadeInUp 0.6s ease forwards;
}

.instruction-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.instruction-icon {
  flex-shrink: 0;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.instruction-card:hover .instruction-icon {
  transform: scale(1.1);
}

.tip-card {
  background: white;
  transition: all 0.3s ease;
  height: 100%;
  animation: fadeInUp 0.6s ease forwards;
}

.tip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color) !important;
}

.scroll-to-quiz {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  border: none;
  transition: all 0.3s ease;
}

.scroll-to-quiz:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px -5px rgba(79, 70, 229, 0.4);
  background: linear-gradient(135deg, #3730a3 0%, #0891b2 100%);
}

/* Animation keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .instructions-section .card-body {
    padding: 2rem 1.5rem;
  }
  
  .instruction-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .instruction-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem;
  }
  
  .instructions-section .d-flex.gap-3 {
    flex-direction: column;
    gap: 1rem !important;
  }
}

/* Animation delays for staggered effect */
.instruction-card:nth-child(1) { animation-delay: 0.1s; }
.instruction-card:nth-child(2) { animation-delay: 0.2s; }

/* ========================================
   COMPREHENSIVE MOBILE OPTIMIZATIONS
   Ensuring all pages work flawlessly on mobile
   ======================================== */

/* Results Page Mobile Optimizations */
@media (max-width: 768px) {
    /* Results page specific improvements */
    .landing-page .landing-content {
        padding: 1rem 0.5rem !important; /* Better mobile spacing */
    }
    
    .landing-page .display-4 {
        font-size: clamp(1.5rem, 6vw, 2.2rem) !important; /* Responsive title */
        margin-bottom: 1rem !important;
    }
    
    .landing-page .lead {
        font-size: clamp(0.9rem, 3vw, 1.1rem) !important; /* Responsive subtitle */
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem; /* Side padding for readability */
        line-height: 1.4; /* Better line spacing */
    }
    
    /* Score badge improvements */
    .badge.fs-3 {
        font-size: clamp(1.2rem, 5vw, 1.8rem) !important; /* Responsive badge */
        padding: 0.75rem 1.5rem !important; /* Better touch targets */
        margin-bottom: 1.5rem !important;
        border-radius: 12px !important; /* Consistent rounding */
        word-wrap: break-word; /* Handle long text */
    }
    
    /* Action buttons container improvements */
    .d-flex.gap-3.justify-content-center.flex-wrap {
        gap: 0.75rem !important; /* Consistent spacing */
        flex-direction: column !important; /* Stack vertically on mobile */
        align-items: center !important; /* Center align */
        padding: 0 1rem !important; /* Side padding */
    }
    
    .d-flex.gap-3.justify-content-center.flex-wrap .btn {
        width: 100% !important; /* Full width */
        max-width: 280px !important; /* But not too wide */
        margin-bottom: 0.5rem !important; /* Space between buttons */
        padding: 0.875rem 1.5rem !important; /* Better touch targets */
        font-size: 0.95rem !important; /* Readable size */
        border-radius: 10px !important; /* Consistent rounding */
        min-height: 44px !important; /* iOS touch standard */
        text-align: center !important; /* Center text */
        display: flex !important; /* Flex for icon alignment */
        align-items: center !important; /* Center vertically */
        justify-content: center !important; /* Center horizontally */
    }
    
    /* Results page quiz results section */
    .quiz-results {
        padding: 1.5rem 1rem !important; /* Better mobile spacing */
        margin: 1rem 0.5rem !important; /* Side margins */
        border-radius: 12px !important; /* Consistent rounding */
    }
    
    .quiz-results li {
        padding: 0.75rem !important; /* Compact padding */
        font-size: 0.9rem !important; /* Readable but compact */
        margin-bottom: 0.75rem !important; /* Reduced spacing */
    }
}

/* Navigation and Header Mobile Improvements */
@media (max-width: 768px) {
    /* Navbar improvements across all pages */
    .navbar {
        padding: 0.5rem 1rem !important; /* Compact navbar */
    }
    
    .navbar-brand {
        font-size: 1.1rem !important; /* Appropriate size */
        padding: 0.5rem 0 !important; /* Vertical padding */
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important; /* Better touch targets */
        font-size: 1rem !important; /* Readable size */
        text-align: center !important; /* Center mobile nav items */
        border-radius: 8px !important; /* Rounded mobile nav items */
        margin: 0.25rem 0 !important; /* Space between items */
    }
    
    /* Quiz header improvements */
    .quiz-header {
        padding: 1.5rem 1rem !important; /* Better mobile spacing */
        text-align: center !important; /* Center all content */
    }
    
    .quiz-header h1 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important; /* Fluid scaling */
        margin-bottom: 0.5rem !important; /* Reduced margin */
    }
    
    .quiz-header .lead {
        font-size: clamp(0.9rem, 3vw, 1.1rem) !important; /* Fluid subtitle */
        margin-bottom: 1rem !important; /* Reduced margin */
        padding: 0 0.5rem !important; /* Side padding */
    }
}

/* Universal Mobile Typography and Spacing */
@media (max-width: 768px) {
    /* Ensure all text is readable and properly sized */
    h1, .h1 { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; }
    h2, .h2 { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
    h3, .h3 { font-size: clamp(1.1rem, 4vw, 1.5rem) !important; }
    h4, .h4 { font-size: clamp(1rem, 3vw, 1.3rem) !important; }
    h5, .h5 { font-size: clamp(0.9rem, 3vw, 1.1rem) !important; }
    
    /* Universal button improvements */
    .btn {
        min-height: 44px !important; /* iOS touch standard */
        padding: 0.75rem 1.5rem !important; /* Better touch targets */
        font-size: 0.95rem !important; /* Readable size */
        border-radius: 8px !important; /* Consistent rounding */
        margin: 0.25rem !important; /* Space between buttons */
        line-height: 1.4 !important; /* Better text spacing */
        word-wrap: break-word !important; /* Handle long text */
    }
    
    /* Universal container improvements */
    .container {
        padding-left: 1rem !important; /* Better side spacing */
        padding-right: 1rem !important;
    }
    
    /* Universal card improvements */
    .card {
        border-radius: 12px !important; /* Consistent rounding */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Consistent shadows */
        margin-bottom: 1rem !important; /* Space between cards */
    }
    
    .card-body {
        padding: 1.5rem 1rem !important; /* Better mobile spacing */
    }
    
    /* Universal form improvements */
    .form-control {
        font-size: 1rem !important; /* Prevent zoom on iOS */
        padding: 0.75rem 1rem !important; /* Better touch targets */
        border-radius: 8px !important; /* Consistent rounding */
        margin-bottom: 1rem !important; /* Space between inputs */
        min-height: 44px !important; /* Touch standard */
    }
    
    /* Universal table improvements */
    .table {
        font-size: 0.9rem !important; /* Readable but compact */
        word-wrap: break-word !important; /* Handle long content */
    }
    
    .table td, .table th {
        padding: 0.75rem 0.5rem !important; /* Better mobile spacing */
        vertical-align: middle !important; /* Center content */
    }
}

/* Ultra-small screens (very small phones) */
@media (max-width: 360px) {
    .container {
        padding-left: 0.5rem !important; /* Minimal padding */
        padding-right: 0.5rem !important;
    }
    
    .btn {
        font-size: 0.9rem !important; /* Slightly smaller text */
        padding: 0.75rem 1rem !important; /* Compact but usable */
    }
    
    .card-body {
        padding: 1rem 0.75rem !important; /* Compact spacing */
    }
    
    .landing-content {
        padding: 0.5rem !important; /* Minimal padding */
    }
}