.role-toggle .toggle-pill.state-students {
    background: #e6f7f2; /* soft green behind buttons when Students selected */
}

.role-toggle .toggle-pill.state-teachers {
    background: #fff7ec; /* soft orange behind buttons when Teachers selected */
}
#btn1 {
    background: linear-gradient(113deg, rgba(255, 255, 255, 0) 14%, rgb(35, 206, 172) 14%, rgb(35, 206, 172) 86%, rgba(255, 255, 255, 0) 86%);
    border-radius: 0px;
    border: 0;
    padding-left: 5% !important;
    padding-right: 5% !important;
}

#btn1:hover {
    background: linear-gradient(113deg, rgba(255, 255, 255, 0) 14%, rgb(125, 125, 125) 14%, rgb(123, 123, 123) 86%, rgba(255, 255, 255, 0) 86%);
}

#btn2 {
    background: linear-gradient(113deg, rgba(255, 255, 255, 0) 14%, rgb(18, 100, 84) 14%, rgb(12, 63, 53) 86%, rgba(255, 255, 255, 0) 86%);
    border-radius: 0px;
    border: 0;
    padding-left: 7% !important;
    padding-right: 7% !important;
}

@media (max-width:700px) {
    #buttonGroup2 {
        padding-bottom: 25% !important;
    }

    #part1Group {
        margin-bottom: 30% !important;
    }
}


#landing {
    padding-top: 5% !important;
    padding-bottom: 2% !important;
    margin: 0 !important;
    color: white;
}

#landing2 {
    padding: 6% !important;
    margin: 0 !important;
    color: white;
}


body {
    background: url("../images/EWS_BG_final1.png") no-repeat center center fixed;
    background-size: cover;
    background-attachment: fixed;
}

/* Progress Bar Styles */
.progress-container {
    width: 40%;
    margin: 0 auto;
    margin-top: 5px;
}

.progress-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
}

.progress-percentage {
    font-size: 0.9rem;
    font-weight: 500;
    color: #23ceac;
}

.quiz-identifier {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Hide big quiz titles on desktop - only on actual question pages, not intro pages */
#part-container #p1-title-2,
#part1-2-container #p1-2-title,
#part-container #part3-quiz-title,
#part-container .quiz-card-wrapper > h1.display-5,
#part1-2-container .quiz-card-wrapper > h1.display-5,
#part-container .quiz-card-wrapper > h1.display-5 {
    display: none !important;
}

/* Hide quiz elements on introduction pages - only show during actual quiz */
#part-container[hidden],
#part1-2-container[hidden],
#part1-container[hidden],
#part3-container[hidden] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#part-container[hidden] .quiz-card-wrapper,
#part-container[hidden] .progress-container,
#part-container[hidden] .quiz-navigation,
#part-container[hidden] #quiz-container,
#part-container[hidden] #question-container {
    display: none !important;
}

/* Email confirmation alert styling */
.alert.alert-success {
    background: white !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    border-radius: 6px;
    padding: 1rem;
    font-size: 0.9rem;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
}

.alert.alert-success::before {
    content: "\f0e0";
    font-family: "bootstrap-icons";
    font-size: 1.1rem;
    color: #495057;
}

.progress {
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.3s ease-in-out;
    border-radius: 4px;
    background-color: #23ceac;
}

/* Quiz Answer Options */
.answers {
    max-width: min(65%, 600px);
    margin: 0 auto;
}

/* Turn radio options into full-width button-like choices */
.answers {
    display: flex;
    flex-direction: column;
    gap: 6px; /* tighter spacing */
}

.answers .form-check {
    margin: 0;
}

.answers .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.answers .form-check-label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px; /* a little less high */
    border: 1px solid rgba(35, 206, 172, 0.35); /* light green outline */
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Larger custom radio circle */
.answers .form-check-label::before {
    content: '';
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #bdbdbd;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
}

/* Hover state for the whole option */
.answers .form-check-label:hover {
    border-color: rgba(35, 206, 172, 0.55);
    box-shadow: 0 0 0 6px rgba(35, 206, 172, 0.08); /* soft green shadow on button only */
    background: #eef8f1; /* subtle green hover fill */
}

/* Checked styles: full-width outline and filled circle */
.answers .form-check-input:checked + .form-check-label {
    border-color: #23ceac;
    box-shadow: inset 0 0 0 9999px rgba(35, 206, 172, 0.04);
}

.answers .form-check-input:checked + .form-check-label::before {
    border-color: #23ceac;
    background: radial-gradient(circle at center, #23ceac 0 55%, transparent 56% 100%);
}

/* Keyboard focus visibility */
.answers .form-check-input:focus + .form-check-label {
    outline: 3px solid rgba(35, 206, 172, 0.35);
    outline-offset: 2px;
}

/* Quiz Question Text */
.question-text {
    max-width: min(65%, 600px);
    margin: 0 auto;
    line-height: 1.6; /* base line height */
    min-height: calc(1.6em * 3); /* reserve space for up to 3 lines */
    display: block;
}

/* Quiz Navigation Buttons */
.quiz-navigation {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    width: 100%;
    max-width: min(65%, 600px); /* match question/answers width */
    margin-left: auto;
    margin-right: auto;
}

/* Make quiz navigation buttons wider and slightly taller on desktop */
.quiz-navigation .btn {
    padding: 0.95rem 1.25rem; /* slightly taller */
    font-size: 1rem; /* slightly larger text */
    min-width: 0; /* allow flex to control width */
    flex: 1 1 0; /* both buttons share available width */
}

/* Give a 60/40 width feel: Next ~60%, Previous ~40% */
#prev-btn.btn {
    flex: 3 1 0; /* ~30% */
}

#next-btn.btn {
    flex: 7 1 0; /* ~70% */
}

/* Ensure primary/secondary variants inherit the sizing */
#prev-btn.btn,
#next-btn.btn {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    min-width: 160px;
}

/* Quiz Button Styles */
.quiz-navigation .btn-primary {
    background-color: #23ceac;
    border-color: #23ceac;
}

.quiz-navigation .btn-primary:hover {
    background-color: #1a9b85;
    border-color: #168a75;
}

.quiz-navigation .btn-secondary {
    background: none !important;
    border: none !important;
    color: #23ceac;
    font-weight: 500;
    padding: 0.375rem 0;
    box-shadow: none !important;
    text-decoration: none;
}

.quiz-navigation .btn-secondary:hover {
    color: #1a9b85;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none;
}

.quiz-navigation .btn-secondary:focus {
    box-shadow: none !important;
    outline: none;
}

/* Feedback Section */
#feedback-section {
    max-width: 800px; /* Constrain width for better readability on desktop */
    margin: 0 auto;
    padding: 0 2rem;
}

/* Responsive adjustments for feedback section */
@media (max-width: 768px) {
    #feedback-section {
        max-width: 100%; /* Full width on mobile for better usability */
        padding: 0 1rem; /* Reduce padding on mobile */
    }
}

#feedback-section h2 {
    text-align: center !important;
}

.result-section {
    text-align: left;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#about {
    background-color: white;
    margin-top: 5%;
}

.section1 {
    background-color: transparent;
    padding-bottom: 9%;
}

.sectionButton {
    background-color: white;
    padding-bottom: 2% !important;
    padding-top: 2%;
}

#buttonGroup2 {
    background-color: white;
    padding-bottom: 8% !important;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }


}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
    z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
}

.container {
    background-color: white;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

#quiz-container,
#result-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

#question-container h4 {
    text-align: center;
    margin-bottom: 16px; /* fixed spacing to avoid layout shifts */
}

.form-check {
    text-align: left;
}

.lead {
    margin-bottom: 0;
    
}

.bold {
    font-weight: bold !important;
}

#part1-container {
    padding-bottom: 5% !important;
}

#part1-2-container {
    padding-bottom: 5% !important;
}

#part3-container {
    padding-bottom: 5% !important;
}

body {
    margin-bottom: 90px !important;
}

.container-item {
    display: flex;
}

.flex-item {
    flex-grow: 1;
}

#tips {
    list-style-type:none;
}


/* Typewriter effect for results */
.typewriter-text {
    overflow: hidden;
    border-right: 2px solid #333;
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #333; }
}

/* Psycho tip container */
.psycho-tip-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.psycho-tip-container::before {
    content: "💡";
    position: absolute;
    top: -18px;
    left: 20px;
    background: white;
    padding: 5px 10px;
    border-radius: 50%;
    font-size: 20px;
    border: 2px solid #dee2e6;
}

.psycho-tip-title {
    font-weight: bold;
    color: #495057;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.psycho-tip-content {
    color: #6c757d;
    line-height: 1.6;
}

/* Deep Dive Card for Quiz 1 Short Low Result */
.deep-dive-card {
    background: rgba(248, 249, 250, 0.7);
    border: none;
    border-radius: 15px;
    padding: 25px;
    margin: 20px 0;
    text-align: left;
}

.deep-dive-card h3 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

.deep-dive-card p {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}

.deep-dive-button-container {
    text-align: center;
    margin-top: 20px;
}

.deep-dive-btn {
    background: #23ceac !important;
    border-color: #23ceac !important;
    color: white !important;
    flex: 1;
    order: 2;
}

.deep-dive-btn:hover {
    background: #1a9b85 !important;
    border-color: #168a75 !important;
    color: white !important;
}

.deep-dive-btn:focus {
    outline: 2px solid rgba(35, 206, 172, 0.5) !important;
    outline-offset: 2px !important;
}

/* Result Buttons Container */
.result-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.retake-btn {
    background: none !important;
    border: none !important;
    color: #23ceac !important;
    font-weight: 500;
    padding: 0.375rem 0;
    box-shadow: none !important;
    text-decoration: none;
    flex: 1;
    order: 1;
}

.retake-btn:hover {
    color: #1a9b85 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none;
}

.retake-btn:focus {
    box-shadow: none !important;
    outline: none;
}

.continue-btn,
.next-btn {
    background: #23ceac !important;
    border-color: #23ceac !important;
    color: white !important;
    flex: 1;
    order: 2;
}

.continue-btn:hover,
.next-btn:hover {
    background: #1a9b85 !important;
    border-color: #168a75 !important;
    color: white !important;
}

.continue-btn:focus,
.next-btn:focus {
    outline: 2px solid rgba(35, 206, 172, 0.5) !important;
    outline-offset: 2px !important;
}

#languageSwitch {
    margin-right: 0.75rem;
}

/* Apple-style floating navbar */
.navbar {
    position: fixed !important;
    top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 95% !important;
    max-width: 1200px !important;
    background: rgba(255, 255, 255, 0.6) !important; /* less transparent */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
    transition: none !important;
    will-change: auto !important;
}


/* Override Bootstrap navbar background */
.navbar.bg-body-tertiary,
.navbar[class*="bg-"] {
    background: rgba(255, 255, 255, 0.6) !important; /* match less transparent navbar */
}

/* Ensure container-fluid doesn't interfere */
.navbar .container-fluid {
    background: transparent !important;
    padding: 0 !important;
}

.navbar:hover {
    background: rgba(255, 255, 255, 0.6) !important; /* slightly more opaque on hover */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

.navbar-brand {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.navbar-brand img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
}

.navbar-nav .nav-link {
    color: #34495e !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
    margin: 0 4px !important;
}

.navbar-nav .nav-link:hover {
    color: #2c3e50 !important;
    background: rgba(52, 73, 94, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

.navbar-nav .nav-link.active {
    color: #2c3e50 !important;
    background: rgba(35, 206, 172, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

/* Role-based active navbar link background */
body.role-theme-student .navbar-nav .nav-link.active {
    background: rgba(35, 206, 172, 0.2) !important;
}

body.role-theme-teacher .navbar-nav .nav-link.active {
    background: rgba(253, 126, 20, 0.2) !important;
}

/* Consistent button styling for all navbar links */
.navbar-nav .nav-link:not(.quiz-main-btn):not([onclick*="openShareModal"]) {
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    margin: 0 4px !important;
    transition: all 0.3s ease !important;
}

.navbar-nav .nav-link:not(.quiz-main-btn):not([onclick*="openShareModal"]):hover {
    background: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* Standardize gap between navbar items */
.navbar-nav {
    gap: 0.5rem !important;
}

.navbar-nav .nav-link {
    margin: 0 !important;
}

/* EWS Quiz Main Button */
.quiz-main-btn {
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(35, 206, 172, 0.2) !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    position: relative !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
}

/* Container for quiz and share buttons - white background similar to Home/Did You Know buttons */
.navbar-nav.ms-auto.d-flex.align-items-center {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 25px !important;
    padding: 0 !important;
    gap: 0.5rem !important;
    transition: all 0.3s ease !important;
}

.navbar-nav.ms-auto.d-flex.align-items-center:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Share button desktop styling */
.navbar-nav .nav-link[onclick*="openShareModal"] {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 25px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    color: #2c3e50 !important;
    font-size: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    position: relative !important;
}

.navbar-nav .nav-link[onclick*="openShareModal"]:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #2c3e50 !important;
}

.quiz-main-btn i {
    color: white !important;
}

.quiz-main-btn, .quiz-main-btn * {
    color: white !important;
}

#navQuiz, #navQuiz * {
    color: white !important;
}

.quiz-main-btn:hover {
    background: linear-gradient(135deg, #20c4a8 0%, #1b9e87 100%) !important;
    box-shadow: 0 2px 8px rgba(35, 206, 172, 0.2) !important;
    color: white !important;
}

.quiz-main-btn:focus,
.quiz-main-btn:focus-visible {
    outline: 2px solid rgba(35, 206, 172, 0.6) !important;
    outline-offset: 2px !important;
    box-shadow: 0 2px 8px rgba(35, 206, 172, 0.2) !important;
}

.quiz-main-btn.active {
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%) !important;
    box-shadow: 0 4px 15px rgba(35, 206, 172, 0.3) !important;
}

.navbar-toggler {
    border: none !important;
    color: #2c3e50 !important;
    padding: 4px 8px !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

/* Language dropdown styling */
#languageSwitch .dropdown-toggle {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(52, 73, 94, 0.2) !important;
    color: #2c3e50 !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

#languageSwitch .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(52, 73, 94, 0.3) !important;
    color: #2c3e50 !important;
}

#languageSwitch .dropdown-menu {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    margin-top: 8px !important;
}

#languageSwitch .dropdown-item {
    color: #333 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    margin: 2px 4px !important;
    transition: all 0.2s ease !important;
}

/* Role-based dropdown item hover - default to student (green) */
#languageSwitch .dropdown-item:hover {
    background: rgba(35, 206, 172, 0.1) !important;
    color: #23ceac !important;
}

/* Student role - green hover */
body.role-theme-student #languageSwitch .dropdown-item:hover {
    background: rgba(35, 206, 172, 0.1) !important;
    color: #23ceac !important;
}

/* Teacher role - orange hover */
body.role-theme-teacher #languageSwitch .dropdown-item:hover {
    background: rgba(253, 126, 20, 0.1) !important;
    color: #fd7e14 !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .navbar {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 95% !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
        z-index: 1000 !important;
        transition: none !important;
        will-change: auto !important;
    }
    
    .navbar.show {
        border-radius: 50px !important;
    }
    
    .navbar-brand {
        font-size: 0.9rem !important;
        flex: 1 !important;
    }
    
    /* Mobile language selector - positioned before burger menu */
    #languageSwitchMobile {
        display: block !important;
        margin-right: 8px !important;
    }
    
    #languageSwitchMobile .btn {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
        min-width: 40px !important;
        height: 32px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid rgba(52, 73, 94, 0.2) !important;
        border-radius: 20px !important;
        color: #2c3e50 !important;
    }
    
    #languageSwitchMobile .btn:hover {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(52, 73, 94, 0.3) !important;
    }
    
    #languageSwitchMobile .dropdown-menu {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 12px !important;
        margin-top: 8px !important;
    }
    
    #languageSwitchMobile .dropdown-item {
        color: #333 !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        margin: 2px 4px !important;
        transition: all 0.2s ease !important;
    }
    
    /* Role-based dropdown item hover - default to student (green) */
    #languageSwitchMobile .dropdown-item:hover {
        background: rgba(35, 206, 172, 0.1) !important;
        color: #23ceac !important;
    }
    
    /* Student role - green hover */
    body.role-theme-student #languageSwitchMobile .dropdown-item:hover {
        background: rgba(35, 206, 172, 0.1) !important;
        color: #23ceac !important;
    }
    
    /* Teacher role - orange hover */
    body.role-theme-teacher #languageSwitchMobile .dropdown-item:hover {
        background: rgba(253, 126, 20, 0.1) !important;
        color: #fd7e14 !important;
    }
    
    /* Burger menu button */
    .navbar-toggler {
        padding: 4px 8px !important;
        border: none !important;
    }
    
    .navbar-toggler-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Consistent spacing for all navbar sections on mobile */
    .navbar-nav:first-of-type {
        padding-top: 0.75rem !important;
        margin-bottom: 0 !important;
        gap: 0.75rem !important;
    }
    
    /* Collapsed menu items - consistent padding and height */
    .navbar-nav .nav-link {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        margin: 0 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .quiz-main-btn {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
        margin: 0 !important;
        width: auto !important;
        text-align: center !important;
        flex: 1 !important;
        max-width: calc(100% - 3rem) !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Mobile menu layout - consistent spacing */
    .navbar-nav.ms-auto {
        margin-left: 0 !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }
    
    .navbar-nav.ms-auto.d-flex {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }
    
    .navbar-nav.ms-auto .me-3 {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Toggle appears below quiz button container - consistent spacing */
    #globalRoleToggle.role-toggle.within-navbar {
        margin-top: 0.75rem !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Show share button on mobile and style it */
    .navbar-nav .nav-link[onclick*="openShareModal"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 16px !important;
        border-radius: 25px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        color: #2c3e50 !important;
        font-size: 1.2rem !important;
        transition: all 0.3s ease !important;
        width: auto !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    .navbar-nav .nav-link[onclick*="openShareModal"]:hover {
        background: rgba(255, 255, 255, 0.5) !important;
        color: #2c3e50 !important;
    }
    
    /* Footer mobile: hide logo and center copyright */
    footer.bg-light-subtle .container > div {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    footer.bg-light-subtle img {
        display: none !important;
    }
    
    footer.bg-light-subtle .col-md-6:last-child {
        width: 100% !important;
        justify-content: center !important;
    }
    
    footer.bg-light-subtle .col-md-6:last-child a {
        justify-content: center !important;
    }
}

/* Intermediate width navbar styling (769px-991px) - maintain mobile layout */
@media (min-width: 769px) and (max-width: 991px) {
    .navbar {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 95% !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
        z-index: 1000 !important;
        transition: none !important;
        will-change: auto !important;
    }
    
    .navbar.show {
        border-radius: 50px !important;
    }
    
    .navbar-brand {
        font-size: 0.9rem !important;
        flex: 1 !important;
    }
    
    /* Show mobile language selector in intermediate width */
    #languageSwitchMobile {
        display: block !important;
        margin-right: 8px !important;
    }
    
    #languageSwitchMobile .btn {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
        min-width: 40px !important;
        height: 32px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid rgba(52, 73, 94, 0.2) !important;
        border-radius: 20px !important;
        color: #2c3e50 !important;
    }
    
    #languageSwitchMobile .btn:hover {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(52, 73, 94, 0.3) !important;
    }
    
    #languageSwitchMobile .dropdown-menu {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 12px !important;
        margin-top: 8px !important;
    }
    
    #languageSwitchMobile .dropdown-item {
        color: #333 !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        margin: 2px 4px !important;
        transition: all 0.2s ease !important;
    }
    
    /* Role-based dropdown item hover - default to student (green) */
    #languageSwitchMobile .dropdown-item:hover {
        background: rgba(35, 206, 172, 0.1) !important;
        color: #23ceac !important;
    }
    
    /* Student role - green hover */
    body.role-theme-student #languageSwitchMobile .dropdown-item:hover {
        background: rgba(35, 206, 172, 0.1) !important;
        color: #23ceac !important;
    }
    
    /* Teacher role - orange hover */
    body.role-theme-teacher #languageSwitchMobile .dropdown-item:hover {
        background: rgba(253, 126, 20, 0.1) !important;
        color: #fd7e14 !important;
    }
    
    /* Burger menu button */
    .navbar-toggler {
        padding: 4px 8px !important;
        border: none !important;
    }
    
    .navbar-toggler-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Consistent spacing for all navbar sections on mobile */
    .navbar-nav:first-of-type {
        padding-top: 0.75rem !important;
        margin-bottom: 0 !important;
        gap: 0.75rem !important;
    }
    
    /* Collapsed menu items - consistent padding and height */
    .navbar-nav .nav-link {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        margin: 0 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .quiz-main-btn {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
        margin: 0 !important;
        width: auto !important;
        text-align: center !important;
        flex: 1 !important;
        max-width: calc(100% - 3rem) !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Mobile menu layout - consistent spacing */
    .navbar-nav.ms-auto {
        margin-left: 0 !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }
    
    .navbar-nav.ms-auto.d-flex {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }
    
    .navbar-nav.ms-auto .me-3 {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Toggle appears below quiz button container - consistent spacing */
    #globalRoleToggle.role-toggle.within-navbar {
        margin-top: 0.75rem !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Show share button and style it */
    .navbar-nav .nav-link[onclick*="openShareModal"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 16px !important;
        border-radius: 25px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        color: #2c3e50 !important;
        font-size: 1.2rem !important;
        transition: all 0.3s ease !important;
        width: auto !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    .navbar-nav .nav-link[onclick*="openShareModal"]:hover {
        background: rgba(255, 255, 255, 0.5) !important;
        color: #2c3e50 !important;
    }
    
    /* Footer mobile: hide logo and center copyright */
    footer.bg-light-subtle .container > div {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    footer.bg-light-subtle img {
        display: none !important;
    }
    
    footer.bg-light-subtle .col-md-6:last-child {
        width: 100% !important;
        justify-content: center !important;
    }
    
    footer.bg-light-subtle .col-md-6:last-child a {
        justify-content: center !important;
    }
}

/* Add top padding to body to account for fixed navbar */
body {
    padding-top: 80px !important;
}

/* Global Role Toggle - hanging from navbar */
#globalRoleToggle.role-toggle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -55px; /* hangs slightly lower below navbar */
    z-index: 999;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

/* Ensure navbar-embedded variant stays inline within navbar layout */
#globalRoleToggle.role-toggle.within-navbar {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Scroll-based hide/show animation */
#globalRoleToggle.role-toggle.scroll-hidden {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Blur the entire page when role selection modal is open */
body.role-selection-open > *:not(.modal):not(.modal-backdrop) {
    filter: blur(4px) !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Role selection modal visuals aligned with app UI */
#roleSelectionModal .modal-content {
    border-radius: 18px !important;
    background: rgba(255,255,255,0.35) !important; /* stronger, less transparent */
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}
#roleSelectionModal .modal-header .modal-title {
    font-weight: 700;
    color: #ffffff !important;
    font-size: 1.75rem !important;
}
@media (max-width: 576px) {
    #roleSelectionModal .modal-header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.5rem;
    }
    #roleSelectionModal .modal-header .modal-title {
        width: 100%;
        text-align: center;
        flex: 1 1 auto;
    }
}
#roleSelectionModal .modal-body p[data-i18n="role.prompt"] {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 500;
}
#roleSelectionModal #roleModalLanguageSwitch {
    margin-left: auto;
}
#roleSelectionModal #roleModalLanguageSwitch .bi-globe {
    font-size: 1rem !important;
    color: #2c3e50 !important;
}
#roleSelectionModal #roleModalLanguageSwitch .btn-secondary {
    padding: 6px 12px !important;
    font-size: 0.9rem !important;
    min-width: 50px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(52, 73, 94, 0.2) !important;
    border-radius: 20px !important;
    color: #2c3e50 !important;
}
#roleSelectionModal #roleModalLanguageSwitch .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(52, 73, 94, 0.3) !important;
    color: #2c3e50 !important;
}
#roleSelectionModal #roleModalLanguageSwitch .dropdown-menu {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    margin-top: 8px !important;
}
#roleSelectionModal #roleModalLanguageSwitch .dropdown-item {
    color: #333 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    margin: 2px 4px !important;
    transition: all 0.2s ease !important;
}
#roleSelectionModal #roleModalLanguageSwitch .dropdown-item:hover {
    background: rgba(35, 206, 172, 0.1) !important;
    color: #23ceac !important;
}
body.role-theme-student #roleSelectionModal #roleModalLanguageSwitch .dropdown-item:hover {
    background: rgba(35, 206, 172, 0.1) !important;
    color: #23ceac !important;
}
body.role-theme-teacher #roleSelectionModal #roleModalLanguageSwitch .dropdown-item:hover {
    background: rgba(253, 126, 20, 0.1) !important;
    color: #fd7e14 !important;
}
#roleSelectionModal .modal-dialog {
    max-width: 640px !important; /* bigger modal */
}
#roleSelectionModal .modal-content {
    position: relative !important;
}
#roleSelectionModal .modal-body {
    padding: 1.25rem 1.5rem 1.75rem 1.5rem !important;
}

/* Mobile: Move language switcher to bottom left of modal */
@media (max-width: 768px) {
    #roleSelectionModal .modal-header #roleModalLanguageSwitch {
        position: absolute !important;
        bottom: 1rem !important;
        left: 1rem !important;
        margin-left: 0 !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        z-index: 10 !important;
    }
    
    #roleSelectionModal .modal-content {
        padding-bottom: 5rem !important; /* Add space at bottom for language switcher with padding */
    }
    
    #roleSelectionModal #roleModalLanguageSwitch .dropdown-menu {
        bottom: 100% !important;
        top: auto !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
    }
}
#roleSelectionModal .role-choice {
    padding: 12px 22px !important; /* bigger buttons */
    font-size: 1rem !important;
    border-radius: 28px !important;
    min-height: 44px !important;
}
#roleSelectionModal .btn-teacher {
    background: linear-gradient(135deg, #fdb067 0%, #fd7e14 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(253, 126, 20, 0.25) !important;
}
#roleSelectionModal .btn-teacher:hover {
    background: linear-gradient(135deg, #fda75a 0%, #f3720d 100%) !important;
    color: #fff !important;
}

@media (max-width: 576px) {
    #roleSelectionModal .modal-dialog {
        margin: 0.75rem !important;
    }
    #roleSelectionModal .modal-body .d-flex {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
    }
    #roleSelectionModal .role-choice {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        justify-content: center !important;
    }
}

.role-toggle.within-navbar {
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: .75rem;
    display: inline-flex;
    align-items: center;
}

/* Mobile navbar: full width toggle, hide rogue pill-icon */
@media (max-width: 991px) {
    /* Make the toggle wrapper full width in navbar - consistent spacing */
    #globalRoleToggle.role-toggle.within-navbar {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    /* Make the pill itself full width */
    #globalRoleToggle.role-toggle.within-navbar .toggle-pill {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        align-items: center !important;
    }
    /* Hide the rogue pill-icon on mobile navbar */
    #globalRoleToggle.role-toggle.within-navbar .pill-icon {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    /* Ensure toggle items show their icons correctly */
    #globalRoleToggle.role-toggle.within-navbar .toggle-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 16px !important;
        height: 100% !important;
        min-height: 0 !important;
    }
    #globalRoleToggle.role-toggle.within-navbar .toggle-item i {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Desktop behavior: pill collapses into a circle and expands in-place */
@media (min-width: 992px) {
    /* Center the role toggle within navbar on desktop */
    .navbar .container-fluid { position: relative; }
    #globalRoleToggle.role-toggle.within-navbar {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        z-index: 1030;
    }
    .role-toggle.within-navbar .toggle-pill {
        display: inline-grid; /* keep grid so content lays out correctly */
        vertical-align: middle;
        transition: max-width 0.6s ease-in-out, min-width 0.6s ease-in-out, border-radius 0.6s ease-in-out, padding 0.6s ease-in-out, background 0.6s ease-in-out, border-color 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
        min-width: 280px; /* minimum expanded width target */
        max-width: 400px; /* allow width to grow based on content */
        width: auto; /* allow width to grow based on content */
        justify-items: center; /* center grid children */
    }
    .role-toggle.within-navbar .toggle-pill.collapsed {
        display: inline-grid; /* keep grid even when collapsed */
        height: 46px;
        width: 98px; /* pill with two equal icon halves */
        min-width: 98px;
        max-width: 98px; /* constrain to collapsed size */
        border-radius: 9999px;
        padding-left: 4px;
        padding-right: 4px;
        position: relative;
        border: 1px solid rgba(255,255,255,0.28);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        transition: max-width 0.6s ease-in-out, min-width 0.6s ease-in-out, border-radius 0.6s ease-in-out, padding 0.6s ease-in-out, background 0.6s ease-in-out, border-color 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
    }
    /* Color theming for collapsed circle uses same scheme as pill */
    .role-toggle.within-navbar .toggle-pill.collapsed.state-students { background: rgba(35, 206, 172, 0.22); }
    .role-toggle.within-navbar .toggle-pill.collapsed.state-teachers { background: rgba(253, 126, 20, 0.22); }
    /* Hide separate single-icon when using icon-only pill */
    .role-toggle.within-navbar .toggle-pill .pill-icon { display: none; }
    .role-toggle.within-navbar .toggle-pill .pill-icon.role-students { color: #1b5e4f; }
    .role-toggle.within-navbar .toggle-pill .pill-icon.role-teachers { color: #7a3e00; }

    /* Keep internal elements visible in collapsed state for icon-only pill */
    .role-toggle.within-navbar .toggle-pill .toggle-thumb,
    .role-toggle.within-navbar .toggle-pill .toggle-item {
        opacity: 1;
        transition: opacity 0s ease-in-out;
    }
    .role-toggle.within-navbar .toggle-pill.collapsed .toggle-thumb,
    .role-toggle.within-navbar .toggle-pill.collapsed .toggle-item {
        opacity: 1;
        pointer-events: auto;
    }

    /* Ensure content is fully visible when expanded */
    .role-toggle.within-navbar .toggle-pill.expanded .toggle-thumb,
    .role-toggle.within-navbar .toggle-pill.expanded .toggle-item {
        opacity: 1;
        pointer-events: auto;
    }

    /* Expanded width target and normal content visibility */
    .role-toggle.within-navbar .toggle-pill.expanded { 
        min-width: 280px; 
        max-width: 400px; /* allow expansion up to this width */
        width: auto; /* allow width to grow based on content */
        padding-left: 0; 
        padding-right: 0; 
        transition: max-width 0.6s ease-in-out, min-width 0.6s ease-in-out, border-radius 0.6s ease-in-out, padding 0.6s ease-in-out, background 0.6s ease-in-out, border-color 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
    }

    /* Icon-only presentation while collapsed */
    .role-toggle.within-navbar .toggle-pill.collapsed .toggle-item {
        padding: 0 12px;
        font-size: 0; /* hide label text without extra markup */
        gap: 0;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0; /* remove stray baseline spacing */
    }
    .role-toggle.within-navbar .toggle-pill.collapsed .toggle-item i {
        font-size: 1.1rem;
        margin: 0;
        line-height: 1;
    }

    /* Ensure thumb sits underneath icons for clearer centering */
    .role-toggle.within-navbar .toggle-pill .toggle-thumb { z-index: 0; }
    .role-toggle.within-navbar .toggle-pill .toggle-item { z-index: 1; }
}

/* Desktop language switcher: text-only button, hover background */
@media (min-width: 992px) {
    #languageSwitch .btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #212529;
        height: 44px; /* match quiz button */
        line-height: normal; /* use flex centering instead */
        padding: 0 12px; /* visual width similar to quiz btn */
        border-radius: 8px;
        transform: none !important;
        transition: background-color .15s ease;
        display: inline-flex;
        align-items: center;
    }
    #languageSwitch .btn:hover {
        background: rgba(0,0,0,0.05) !important;
        transform: none !important;
    }
}

/* Ensure quiz button doesn't move up on hover */
.navbar .nav-link.quiz-main-btn:hover {
    transform: none !important;
}

/* Vertically center nav buttons/icons */
.navbar .nav-link.quiz-main-btn,
.navbar .nav-link[title="Share"] {
    height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Ensure left-side nav links text are vertically centered to navbar height */
.navbar .navbar-nav .nav-link {
    height: 46px;
    display: inline-flex;
    align-items: center;
}

.role-toggle .toggle-pill {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
    background: rgba(255,255,255,0.10); /* match card glassiness */
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    gap: 0;
    height: 46px; /* unify height for smooth collapse */
    padding: 0; /* internal items carry their own padding */
}

.role-toggle .toggle-item {
    padding: 10px 18px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6c757d;
    z-index: 1;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap; /* prevent text wrapping */
    flex-shrink: 0; /* prevent items from shrinking */
    transition: font-size 0.6s ease-in-out, padding 0.6s ease-in-out, gap 0.6s ease-in-out;
}

.role-toggle .toggle-item.students.active { color: #fff; }

.role-toggle .toggle-item.teachers {
    background: transparent;
    color: #f38b1c; /* orange text */
}

/* Teacher active state (orange button with darker text) */
.role-toggle .toggle-item.teachers.active { color: #8b4513; }

/* State-driven text colors: active side uses dark brand color, opposite stays white */
.role-toggle .toggle-pill.state-students .toggle-item.students { color: #1b5e4f !important; } /* dark green */
.role-toggle .toggle-pill.state-students .toggle-item.teachers { color: #ffffff !important; }
.role-toggle .toggle-pill.state-teachers .toggle-item.teachers { color: #7a3e00 !important; } /* dark orange/brown */
.role-toggle .toggle-pill.state-teachers .toggle-item.students { color: #ffffff !important; }

/* Sliding thumb (iPhone-style) */
.role-toggle .toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    width: calc(50% - 6px);
    border-radius: 999px;
    background: #23ceac; /* default students */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    transition: transform 200ms ease, background 200ms ease;
}

.role-toggle .toggle-pill.state-students .toggle-thumb {
    transform: translateX(0);
    background: #23ceac;
}

.role-toggle .toggle-pill.state-teachers .toggle-thumb {
    transform: translateX(calc(100% + 6px));
    background: #ffd3a5;
}

/* Outer hanging tab background similar to navbar but slightly stronger */
#globalRoleToggle.role-toggle {
    background: transparent;
    border: none;
    padding: 0;
}

.role-toggle .toggle-pill.state-students { background: rgba(35, 206, 172, 0.22); } /* stronger green, transparent */
.role-toggle .toggle-pill.state-teachers { background: rgba(253, 126, 20, 0.22); } /* stronger orange, transparent */

@media (max-width: 768px) {
    #globalRoleToggle.role-toggle {
        position: fixed;
        top: 55px; /* 60px navbar + 2px gap when collapsed - reduced distance */
        left: 50%;
        transform: translateX(-50%);
        z-index: 1020;
        bottom: auto;
        transition: top 0.35s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
    }
    
    /* When navbar is expanded, move down below the expanded menu items */
    #globalRoleToggle.role-toggle.navbar-expanded {
        top: 197px; /* Height of expanded navbar + 15px gap - increased distance */
    }
    
    /* Mobile scroll-based hide/show animation - SAME AS DESKTOP */
    #globalRoleToggle.role-toggle.scroll-hidden {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }
    
    .role-toggle .toggle-pill {
        width: auto;
        min-width: 200px; /* ensure minimum width for longer translations */
        height: 36px;
        display: flex;
        align-items: center;
        border-radius: 20px;
        padding: 2px;
    }
    
    .role-toggle .toggle-item {
        padding: 8px 16px;
        font-size: 0.9rem;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        white-space: nowrap; /* prevent text wrapping on mobile too */
        flex-shrink: 0; /* prevent items from shrinking */
    }
}

/* Did You Know Page Styles */
.hero-section {
    background: transparent;
    margin-top: 0; /* avoid overlapping the fixed navbar */
    padding-top: 60px !important; /* more space under navbar and hanging toggle */
    padding-bottom: 120px !important; /* match top padding */
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Extra clearance for Did You Know role sections */
#studentDYK .hero-section,
#teacherDYK .hero-section {
    padding-top: 20px !important;
}

/* Move glass-panel (tabs and content) higher in Did You Know sections */
#studentDYK .glass-panel,
#teacherDYK .glass-panel {
    margin-top: -1.25rem !important;
}

/* Add bottom padding to share link container */
#share-link-container {
    padding-bottom: 0.5rem !important;
}

/* Scroll indicator arrow */
.scroll-indicator {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bounceDown 2s ease-in-out infinite;
    pointer-events: none;
    width: 100%;
}

/* Ensure hero section allows overflow on desktop for arrow visibility */
@media (min-width: 768px) {
    .hero-section {
        overflow: visible !important;
    }
    
    .hero-content,
    .hero-section .container-fluid,
    .hero-section .container {
        overflow: visible !important;
    }
}

/* Ensure scroll indicator is centered on all screen sizes */
@media (max-width: 767px) {
    .scroll-indicator {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
}

.scroll-indicator i {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: color 0.3s ease;
    pointer-events: auto;
}

.scroll-indicator:hover i {
    color: rgba(255, 255, 255, 1);
}

/* Bouncing animation */
@keyframes bounceDown {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

/* Landing hero: remove glass panel so only CTA has green glass */
#landing .glass-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Ensure no solid backgrounds block the page background image in hero areas */
.hero-section .container,
.hero-section .row,
.hero-section .col,
.hero-section .col-12 {
    background: transparent !important;
}

/* Make Did You Know tab UI glassy instead of solid white */
/* Simplify DYK container: single glass on outer, transparent inner wrappers */
.tab-navigation,
.tab-content-container,
.tab-content {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Remove overall glass background from DYK inner wrapper card */
#studentDYK .glass-panel,
#teacherDYK .glass-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: 0.5rem !important;
}

/* Keep a single, subtle glass on the main wrapper */
.glass-panel {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Tab content card */
.tab-content-container .card,
.tab-content .card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: -1;
}

.hero-icon {
    animation: float 3s ease-in-out infinite;
    margin-bottom: 0.25rem !important;
    margin-top: 2rem !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Desktop: Position lightbulb above tabs and constrain width */
@media (min-width: 769px) {
    .hero-icon {
        margin-bottom: 0.5rem !important;
    }
    
    .tab-navigation {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .tab-content-container {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .tab-content {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        margin: 2rem auto !important;
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop/tablet default: hide selected tab title (mobile-only element) */
.tab-selected-title {
    display: none;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0 1rem 1.25rem 1rem;
}

/* Override glass-panel padding on mobile */
@media (max-width: 768px) {
    .glass-panel {
        padding: 0 0 1rem 0 !important;
    }
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 120px;
}

/* Stronger glass look applied specifically to DYK tabs */
#studentDYK .tab-item,
#teacherDYK .tab-item {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.tab-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.tab-item.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: #23ceac;
    transform: scale(1.05);
}

.tab-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #23ceac;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.tab-item.active .tab-number {
    background: #fff;
    color: #23ceac;
}

.tab-label {
    font-size: 1rem;
    color: white;
    font-weight: 600;
    text-align: center;
}

/* Tab Content */
.tab-content-container {
    position: relative;
    min-height: 600px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.tab-content.active {
    display: block;
}

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

.tip-title-section {
    flex: 1;
}

.tip-subtitle {
    color: #6c757d;
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

/* Tips and What's Next Container */
.container-fluid.py-5 {
    padding-top: 6.25rem !important;
    padding-bottom: 5.625rem !important;
}

/* Tips and What's Next Sections */
.tips-section,
.whats-next-section {
    background: transparent !important;
    border-radius: 0;
    padding: 2rem;
    border: none !important;
    margin: 0 2rem;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Container for tip items to handle overflow */
.tips-section .tip-item:last-child,
.whats-next-section .tip-item:last-child {
    margin-bottom: 0;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(35, 206, 172, 0.1) 0%, rgba(26, 155, 133, 0.1) 100%);
    border: 1px solid rgba(35, 206, 172, 0.2);
    padding: 1.5rem;
    border-radius: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.tip-item i {
    color: #2c3e50 !important;
}

.tip-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.tip-item i {
    font-size: 1.5rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.tip-text {
    color: #2c3e50;
    line-height: 1.6;
}

/* Center titles in Tips and What's Next sections */
.tips-section h3,
.whats-next-section h3 {
    text-align: center !important;
}

/* Hide icons in titles on desktop - they should only be in tip-item */
.tips-title i,
.whats-next-title i {
    display: none;
}

/* CTA Section Updates */
.cta-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.cta-section .btn.quiz-main-btn {
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%) !important;
    color: white !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 4px 15px rgba(35, 206, 172, 0.3) !important;
    transition: all 0.3s ease !important;
}

.cta-section .btn.quiz-main-btn:hover {
    box-shadow: 0 3px 12px rgba(35, 206, 172, 0.25) !important;
}

/* CTA Button Container - Add arrow above button */
.cta-button-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Add down arrow above button */
.cta-button-container::before {
    content: '↓';
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    display: block;
    text-align: center;
    line-height: 1;
}

.cta-icon {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Match hero EWS Quiz button with navbar style */
.btn-primary-cta {
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(35, 206, 172, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* Plain CTA variant (no background/border) */
.cta-section-plain {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.btn-primary-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(35, 206, 172, 0.4) !important;
}

/* Secondary style for Did You Know button */
.btn-secondary-cta {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #2c3e50 !important;
    border: 1px solid rgba(52, 73, 94, 0.2) !important;
    padding: 1rem 2rem !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(6px);
    transition: all 0.3s ease !important;
}

.btn-secondary-cta:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(52, 73, 94, 0.35) !important;
}

/* Footer: single grey background with horizontal padding */
footer.bg-light-subtle {
    background-color: #e9ecef !important; /* unified grey */
}

footer.bg-light-subtle > .container,
footer.bg-light-subtle > .container-fluid {
    background: transparent !important; /* avoid inner white box */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.tip-card {
    background: rgba(255, 255, 255, 0.8); /* glass-like card over image */
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    height: 100%;
    color: #2c3e50; /* readable text on light glass */
}

/* Override tip-card padding on mobile - full width, no left/right padding */
@media (max-width: 768px) {
    .tip-card {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Remove horizontal padding from parent containers on mobile */
    .tab-content-container,
    .tab-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    /* Remove horizontal padding from hero-section and glass-panel on didyouknow page */
    #studentDYK .hero-section,
    #teacherDYK .hero-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #studentDYK .glass-panel,
    #teacherDYK .glass-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.tip-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.tip-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f8f9fa;
}

.tip-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.5rem;
}

.tip-icon i {
    color: #2c3e50 !important;
}

.tip-title {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
    font-size: 1.5rem;
}

.tip-question {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 0 1rem;
    position: relative;
}

.tip-question::before {
    display: none; /* Remove white left shadows */
}

.tip-question h5 {
    color: #34495e;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 1.1rem;
    flex: 0 0 40%;
    padding-right: 1rem;
    position: relative;
    z-index: 1;
}

.tip-answer {
    background: rgba(255, 255, 255, 0.7); /* semi-transparent to avoid white-on-white */
    padding: 1rem;
    border-radius: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #2c3e50;
    flex: 0 0 60%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.tip-answer strong {
    color: #2c3e50;
}

/* Responsive behavior for tip-question layout */
@media (max-width: 768px) {
    .tip-question {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        padding: 0 0.5rem;
    }
    
    .tip-question h5 {
        flex: none;
        padding-right: 0;
        margin-bottom: 0.5rem;
    }
    
    .tip-answer {
        flex: none;
        width: 100%;
    }
}

.key-takeaways {
    background: linear-gradient(135deg, rgba(35, 206, 172, 0.1) 0%, rgba(26, 155, 133, 0.1) 100%);
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(35, 206, 172, 0.2);
}

.takeaway-item {
    display: flex;
    align-items: flex-start;
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.takeaway-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.takeaway-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.takeaway-content h5 {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.takeaway-content p {
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
}

.cta-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
}

.cta-section h3 {
    color: #2c3e50;
    font-weight: 600;
}

.cta-section .lead {
    color: #6c757d;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tab-navigation {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }
    
    .tab-item {
        min-width: 50px;
        width: 50px;
        height: 50px;
        padding: 0;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide tab labels on mobile, show only numbers */
    .tab-label {
        display: none !important;
    }
    
    /* Make tab numbers fit properly and centered */
    .tab-number {
        width: 40px;
        height: 40px;
        margin: 0;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Selected tab title - shown above tabs on mobile */
    .tab-selected-title {
        display: block;
        width: 100%;
        text-align: center;
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        padding: 0.75rem 1rem;
        line-height: 1.3;
        color: white;
    }
    
    .tip-card {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }
    
    .tip-header {
        flex-direction: column;
        text-align: center;
    }
    
    .tip-icon {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .tips-section,
    .whats-next-section,
    .cta-section {
        padding: 2rem;
    }
    
    .tip-item {
        flex-direction: row;
        text-align: left;
    }
    
    /* Hide icons in tip-item on mobile - they're now in titles */
    .tip-item i {
        display: none !important;
    }
    
    /* Increase title size on mobile */
    .tips-section h3,
    .whats-next-section h3 {
        font-size: 1.5rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Show icons in titles on mobile and position them on the left of the text */
    .tips-title i,
    .whats-next-title i {
        display: inline-block !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        font-size: 1.5rem !important;
        flex-shrink: 0;
        order: -1; /* Place icon before text */
    }
    
    .tips-section h3,
    .whats-next-section h3 {
        gap: 0.75rem;
    }
}

/* Modern Quiz Page Styling */
.quiz-page-container {
    background: white;
    min-height: 100vh;
    padding: 0rem 0 0 0; /* remove bottom padding */
    margin-top: 140px; /* clear fixed navbar + hanging toggle */
}

.quiz-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero Section */
.quiz-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.quiz-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.quiz-hero-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    font-weight: 400;
}

/* Assessment Cards */
.assessment-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.assessment-card {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
}

.assessment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: #23ceac;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    flex: 1;
}

.card-description {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.card-actions {
    text-align: center;
}

/* Info Button with Tooltip */
.info-btn {
    background: #6c757d;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    margin-left: 10px;
    flex-shrink: 0;
}

.info-btn:hover {
    background: #23ceac;
    transform: scale(1.1);
}

.info-btn span {
    font-size: 14px;
    color: white;
}

/* Tooltip */
.info-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 300px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.info-btn::before {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2c3e50;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.info-btn:hover::after,
.info-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Action Buttons */
.action-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.action-btn.primary {
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(35, 206, 172, 0.3);
}

.action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(35, 206, 172, 0.4);
    color: white;
    text-decoration: none;
}

.action-btn.secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.action-btn.secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
    color: white;
    text-decoration: none;
}

/* Results Info */
.results-info {
    background: #e3f2fd;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 3rem;
    border-left: 4px solid #2196f3;
}

.info-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.info-header h3 {
    margin: 0;
    color: #1976d2;
    font-size: 1.3rem;
    font-weight: 600;
}

.results-info p {
    margin: 0;
    color: #424242;
    font-size: 1rem;
}

/* User Selection */
.user-selection {
    text-align: center;
    margin-bottom: 2rem;
}

.user-selection h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.user-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.user-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 150px;
    border: 2px solid transparent;
}

.user-btn.student-btn {
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(35, 206, 172, 0.3);
}

.user-btn.teacher-btn {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.user-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    color: white;
    text-decoration: none;
}

.btn-icon {
    font-size: 2rem;
}

.btn-text {
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Responsive quiz styling */
@media (max-width: 768px) {
    .quiz-content {
        padding: 0 !important;
    }
    
    .quiz-hero-title {
        font-size: 2rem;
    }
    
    .quiz-hero-subtitle {
        font-size: 1rem;
    }
    
    .assessment-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .assessment-card {
        padding: 1.5rem;
    }
    
    .card-title {
        font-size: 1.3rem;
    }
    
    .user-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .user-btn {
        width: 100%;
        max-width: 250px;
    }
    
    .info-btn::after {
        max-width: 250px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .quiz-page-container {
        padding: 1rem 0;
    }
    
    .quiz-content {
        padding: 0 !important;
    }
    
    .quiz-hero-title {
        font-size: 1.8rem;
    }
    
    .assessment-card {
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1.2rem;
    }
    
    .action-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* ===== ENHANCED UX STYLES ===== */

/* Hero Section Styles */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: white;
    position: relative;
}

.hero-content {
    max-width: 1200px;
    width: 100%;
    text-align: center;
    animation: fadeInUp 1s ease-out;
    margin: 0 auto;
}

.logo-container {
    margin-bottom: 2rem;
}

.hero-logo {
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #e8f4f8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-description {
    margin-bottom: 3rem;
}

.hero-intro {
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 3rem;
    opacity: 0.95;
    line-height: 1.6;
}

/* Feature Cards */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* On landing hero, show features stacked vertically */
#landing .feature-cards {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0; /* rely on column spacing */
}

.feature-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    padding: 1rem 1rem;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.feature-card:hover::before {
    left: 100%;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: #2c3e50 !important;
}

/* Override Bootstrap icon colors on feature cards */
.feature-card .bi {
    color: #2c3e50 !important;
}

.feature-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: white;
}

.feature-card p {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.5;
    margin: 0;
}

/* Enhanced CTA Buttons */
.cta-section {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 3rem;
    width: 100%;
}

/* Ensure both buttons have the same width - large enough for all languages */
.cta-section .btn-primary-cta,
.cta-section .btn-secondary-cta {
    width: 260px;
    min-width: 260px;
}

.btn-primary-cta, .btn-secondary-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.8rem;
    padding: 1rem 2.5rem !important;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 260px;
    width: 260px;
    max-width: 260px;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    margin: 0 !important;
}

/* Ensure icons and text inside buttons are centered */
.btn-primary-cta i,
.btn-primary-cta .btn-icon,
.btn-primary-cta .btn-text,
.btn-secondary-cta i,
.btn-secondary-cta .btn-icon,
.btn-secondary-cta .btn-text {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    text-align: center;
}

/* Remove any margin from Bootstrap's me-2 class when inside CTA buttons */
.btn-primary-cta .me-2,
.btn-secondary-cta .me-2 {
    margin-right: 0 !important;
}

.btn-primary-cta {
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%);
    color: white;
    border: none;
    box-shadow: 0 8px 25px rgba(35, 206, 172, 0.3);
}

.btn-primary-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(35, 206, 172, 0.4);
    color: white;
}

.btn-secondary-cta {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.btn-secondary-cta:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
    color: white;
}

.btn-icon {
    font-size: 1.2rem;
}

/* About Section Styles */
.about-section {
    background: white;
    padding: 5rem 2rem;
    margin-top: 0;
}

.about-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.about-title {
    font-size: 3rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 2rem;
    position: relative;
}

.about-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%);
    border-radius: 2px;
}

/* Role-based accent switching (Student = green, Teacher = orange) */
body.role-theme-student .highlight-icon { color: #23ceac; }
body.role-theme-student .about-title::after { background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%); }
body.role-theme-student .tab-number { background: #23ceac; }
body.role-theme-student .tab-item.active .tab-number { background: #fff; color: #23ceac; }
/* body.role-theme-student .tip-answer - empty rule removed */
body.role-theme-student .tips-section { background: transparent !important; border: none !important; }
body.role-theme-student .whats-next-section { background: transparent !important; border: none !important; }
body.role-theme-student .tip-item { background: linear-gradient(135deg, rgba(35, 206, 172, 0.1) 0%, rgba(26, 155, 133, 0.1) 100%) !important; border: 1px solid rgba(35, 206, 172, 0.2) !important; }
body.role-theme-student .quiz-main-btn { background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%) !important; }
body.role-theme-student .quiz-main-btn.active { background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%) !important; }
body.role-theme-student .quiz-main-btn:hover { background: linear-gradient(135deg, #22d0b0 0%, #1ba088 100%) !important; }
body.role-theme-student .btn-primary-cta { background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%) !important; }
body.role-theme-student .btn-success { background: #23ceac !important; border-color: #23ceac !important; }
body.role-theme-student .progress-bar { background-color: #23ceac !important; }
body.role-theme-student .progress-percentage { color: #23ceac !important; }
body.role-theme-student .answers .form-check-label { border-color: rgba(35, 206, 172, 0.35) !important; }
body.role-theme-student .answers .form-check-label:hover { border-color: rgba(35, 206, 172, 0.55) !important; box-shadow: 0 0 0 6px rgba(35, 206, 172, 0.08) !important; }
body.role-theme-student .answers .form-check-input:checked + .form-check-label { border-color: #23ceac !important; }
body.role-theme-student .answers .form-check-input:checked + .form-check-label::before { border-color: #23ceac !important; background: radial-gradient(circle at center, #23ceac 0 55%, transparent 56% 100%) !important; }

body.role-theme-teacher .highlight-icon { color: #fd7e14; }
body.role-theme-teacher .about-title::after { background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%); }
body.role-theme-teacher .tab-number { background: #fd7e14; }
body.role-theme-teacher .tab-item.active .tab-number { background: #fff; color: #fd7e14; }
/* body.role-theme-teacher .tip-answer - empty rule removed */
body.role-theme-teacher .tips-section { background: transparent !important; border: none !important; }
body.role-theme-teacher .whats-next-section { background: transparent !important; border: none !important; }
body.role-theme-teacher .tip-item { background: linear-gradient(135deg, rgba(253, 126, 20, 0.1) 0%, rgba(255, 193, 7, 0.1) 100%) !important; border: 1px solid rgba(253, 126, 20, 0.2) !important; }
body.role-theme-teacher .quiz-main-btn { 
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%) !important; 
    box-shadow: 0 2px 8px rgba(253, 126, 20, 0.2) !important;
}
body.role-theme-teacher .quiz-main-btn:hover {
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%) !important;
    box-shadow: 0 2px 8px rgba(253, 126, 20, 0.2) !important;
}
body.role-theme-teacher .quiz-main-btn.active { 
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%) !important; 
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3) !important;
}
body.role-theme-teacher .btn-primary-cta { background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%) !important; }
body.role-theme-teacher .btn-success { background: #fd7e14 !important; border-color: #fd7e14 !important; }
body.role-theme-teacher .progress-bar { background-color: #fd7e14 !important; }
body.role-theme-teacher .progress-percentage { color: #fd7e14 !important; }
body.role-theme-teacher .answers .form-check-label { border-color: rgba(253, 126, 20, 0.35) !important; }
body.role-theme-teacher .answers .form-check-label:hover { 
    border-color: rgba(253, 126, 20, 0.55) !important; 
    box-shadow: 0 0 0 6px rgba(253, 126, 20, 0.08) !important; 
    background: #fff4ec !important;
}
body.role-theme-teacher .answers .form-check-input:checked + .form-check-label { border-color: #fd7e14 !important; }
body.role-theme-teacher .answers .form-check-input:checked + .form-check-label::before { border-color: #fd7e14 !important; background: radial-gradient(circle at center, #fd7e14 0 55%, transparent 56% 100%) !important; }

/* Role-based navigation button colors */
body.role-theme-student .quiz-navigation .btn-primary { background: #23ceac !important; border-color: #23ceac !important; }
body.role-theme-student .quiz-navigation .btn-primary:hover { background: #1a9b85 !important; border-color: #1a9b85 !important; }
body.role-theme-student .quiz-navigation .btn-secondary { color: #23ceac !important; }
body.role-theme-student .quiz-navigation .btn-secondary:hover { color: #1a9b85 !important; }

body.role-theme-teacher .quiz-navigation .btn-primary { background: #fd7e14 !important; border-color: #fd7e14 !important; }
body.role-theme-teacher .quiz-navigation .btn-primary:hover { background: #e8690b !important; border-color: #e8690b !important; }
body.role-theme-teacher .quiz-navigation .btn-secondary { color: #fd7e14 !important; }
body.role-theme-teacher .quiz-navigation .btn-secondary:hover { color: #e8690b !important; }

/* Role-based result buttons */
body.role-theme-student .continue-btn { background: #23ceac !important; border-color: #23ceac !important; }
body.role-theme-student .continue-btn:hover { background: #1a9b85 !important; border-color: #1a9b85 !important; }
body.role-theme-student .retake-btn { color: #23ceac !important; }
body.role-theme-student .retake-btn:hover { color: #1a9b85 !important; }
body.role-theme-student .deep-dive-btn { background: #23ceac !important; border-color: #23ceac !important; }
body.role-theme-student .deep-dive-btn:hover { background: #1a9b85 !important; border-color: #1a9b85 !important; }

body.role-theme-teacher .continue-btn { background: #fd7e14 !important; border-color: #fd7e14 !important; }
body.role-theme-teacher .continue-btn:hover { background: #e8690b !important; border-color: #e8690b !important; }
body.role-theme-teacher .retake-btn { color: #fd7e14 !important; }
body.role-theme-teacher .retake-btn:hover { color: #e8690b !important; }
body.role-theme-teacher .deep-dive-btn { background: #fd7e14 !important; border-color: #fd7e14 !important; }
body.role-theme-teacher .deep-dive-btn:hover { background: #e8690b !important; border-color: #e8690b !important; }

.about-intro {
    font-size: 1.2rem;
    color: #5a6c7d;
    line-height: 1.8;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA button under about-intro */
.about-cta-btn {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.2) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.about-cta-btn:hover,
.about-cta-btn:focus {
    background-color: #22313f !important;
    color: #ffffff !important;
}

/* Ensure the F3 CTA is visible and tappable on mobile */
@media (max-width: 768px) {
    .about-cta-btn {
        display: inline-flex !important;
        min-height: 44px !important;
        padding: 10px 20px !important;
        font-size: 1rem !important;
    }
}

.project-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 2rem;
    background: transparent;
    border-radius: 15px;
    transition: all 0.3s ease;
    cursor: default;
}

.highlight-item:hover {
    box-shadow: none;
}

.highlight-icon {
    font-size: 3rem;
    color: #23ceac;
    margin-bottom: 0.5rem;
}

.highlight-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.highlight-content p {
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
}

.participating-countries {
    margin-top: 2rem;
    padding: 2rem;
    background: transparent;
    border-radius: 20px;
}

.participating-countries h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2rem;
}

.country-flags {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    justify-items: center;
    align-items: start;
}

.country-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    text-align: center;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.country-item:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #23ceac;
}

.flag {
    font-size: 3rem;
}

.organization-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #007bff;
    margin-top: 0.3rem;
}

/* Role-based colors for organization names */
body.role-theme-student .organization-name {
    color: #23ceac;
}

body.role-theme-teacher .organization-name {
    color: #fd7e14;
}

/* Role-based country item hover colors */
body.role-theme-teacher .country-item:hover {
    border-color: #fd7e14;
}

.country-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: #495057;
    margin-top: 0.2rem;
}

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

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered animation for feature cards */
.feature-card:nth-child(1) {
    animation: slideInLeft 0.8s ease-out 0.2s both;
}

.feature-card:nth-child(2) {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.feature-card:nth-child(3) {
    animation: slideInRight 0.8s ease-out 0.6s both;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Enhanced focus states for accessibility */
.btn-primary-cta:focus,
.btn-secondary-cta:focus {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Loading animation for better perceived performance */
.hero-content {
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.3s forwards;
}

/* Subtle parallax effect for background */
body {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Enhanced hover states */
.country-item {
    cursor: pointer;
}

/* Improved button states */
.btn-primary-cta:active {
    transform: translateY(-1px);
}

.btn-secondary-cta:active {
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        margin-top: 2rem;
    }
    
    .hero-intro {
        display: none !important;
    }
    
    .feature-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cta-section {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary-cta, .btn-secondary-cta {
        width: 100%;
        max-width: 300px;
    }
    
    .about-title {
        font-size: 2.2rem;
    }
    
    .project-highlights {
        grid-template-columns: 1fr;
    }
    
    .highlight-item {
        flex-direction: column;
        text-align: center;
    }
    
    .country-flags {
        grid-template-columns: repeat(3, 1fr); /* 3x2 layout for tablet */
        gap: 0.5rem; /* Reduced from 1.5rem to 0.5rem (67% reduction) */
        justify-items: center; /* Center items within grid cells */
    }
    
    .flag {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 1rem 0.5rem;
        min-height: 90vh;
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .hero-intro {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .feature-card {
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
    }
    
    .feature-icon {
        font-size: 2.5rem;
    }
    
    .feature-card h3 {
        font-size: 1.1rem;
    }
    
    .feature-card p {
        font-size: 0.9rem;
    }
    
    .cta-section {
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .btn-primary-cta, .btn-secondary-cta {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        min-width: 260px;
        width: 260px;
    }
    
    .about-section {
        padding: 3rem 1rem;
    }
    
    .about-title {
        font-size: 1.8rem;
    }
    
    .about-intro {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .highlight-item {
        padding: 1.5rem;
        gap: 1rem;
    }
    
    .highlight-icon {
        font-size: 2rem;
    }
    
    .highlight-content h3 {
        font-size: 1.1rem;
    }
    
    .highlight-content p {
        font-size: 0.9rem;
    }
    
    .participating-countries {
        padding: 1.5rem;
        margin-top: 2rem;
    }
    
    .participating-countries h3 {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }
    
    .country-flags {
        grid-template-columns: repeat(2, 1fr); /* 2x3 layout for mobile */
        gap: 0.5rem; /* Reduced from 1rem to 0.5rem (50% reduction) */
        justify-items: center; /* Center items within grid cells */
    }
    
    .flag {
        font-size: 2rem;
    }
    
    .organization-name {
        font-size: 0.8rem;
    }
    
    .country-name {
        font-size: 1rem;
    }
    
    /* Participating countries mobile optimizations */
    .country-item {
        min-height: 90px !important; /* Reduced from 120px to 90px */
        padding: 0.5rem !important; /* Reduced from 1rem to 0.5rem */
    }
    
    /* Disable animations on mobile for better performance */
    .feature-card {
        animation: none;
    }
    
    .hero-content {
        animation: none;
        opacity: 1;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    .feature-cards {
        gap: 1rem;
    }
    
    .feature-card {
        padding: 1rem 0.8rem;
    }
    
    .btn-primary-cta, .btn-secondary-cta {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
        min-width: 160px;
    }
    
    .about-section {
        padding: 2rem 0.8rem;
    }
    
    .highlight-item {
        padding: 1rem;
    }
    
    .participating-countries {
        padding: 1rem;
    }
}

/* Quiz Page Enhanced Styles */
.hero-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0 2rem;
    max-width: none;
    display: flex;
    gap: 2rem;
    align-items: stretch; /* ensure equal height cards */
}


.quiz-fullwidth-card {
    flex: 1;
    padding: 2rem;
    margin-bottom: 1rem;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

/* Center buttons at bottom of cards */
.quiz-fullwidth-card .quiz-buttons {
    display: block; /* keep JS inline style compatibility */
    text-align: center;
}

.quiz-fullwidth-card .quiz-buttons .btn {
    display: inline-block;
}

.quiz-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    text-align: center;
}

.quiz-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1.5rem;
    text-align: center;
    line-height: 1.3;
}

.quiz-section {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-left: none;
    flex: 1;
}

/* Role-based accent on quiz cards - removed colored borders */

.quiz-section h3 {
    color: #2c3e50;
    font-weight: 600;
}

.quiz-section p {
    color: #34495e;
    margin: 0;
    line-height: 1.6;
}

.results-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.results-content {
    max-width: 800px;
    margin: 0 auto;
}

.results-content p {
    color: #2c3e50;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Tab styling */
/* Oldschool tabs (distinct from buttons) */
/* Removed white-section on quiz page */

.role-tabs {
    display: flex;
    gap: 1rem;
    padding: 0 2rem;
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.role-tab {
    appearance: none;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    background: white;
    color: #6c757d;
    padding: 0.7rem 1.5rem;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.role-tab.active.student {
    background: #a8e6cf;
    color: #2d5a4a;
    border-color: #a8e6cf;
}

.role-tab.active.teacher {
    background: #ffd3a5;
    color: #8b4513;
    border-color: #ffd3a5;
}

.role-theme-student .role-tabs { border-color: #a8e6cf; }
.role-theme-teacher .role-tabs { border-color: #ffd3a5; }

.buttons-wrapper { padding: 1rem 2rem; }

/* Quiz info above buttons */
/* Buttons below cards */
.quiz-info-below {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 1rem 4rem 1rem;
    flex-wrap: wrap;
}

.role-theme-student .quiz-info-below { background: transparent; }
.role-theme-teacher .quiz-info-below { background: transparent; }

.quiz-button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.quiz-info-title-only {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2c3e50;
    text-align: center;
    margin: 0;
}

/* Full-width results */
/* Full-width results section, stretching to bottom */
.results-fullwidth {
    background: white;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 2rem 2rem 16rem 2rem; /* bottom is double the top */
    border-top: none;
    margin-bottom: 0;
    position: relative;
}

/* Role-based radial shadow at bottom */
.results-fullwidth::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 400px;
    background: radial-gradient(ellipse at center bottom, rgba(35, 206, 172, 0.4) 0%, rgba(35, 206, 172, 0.1) 50%, transparent 80%);
    pointer-events: none;
}

body.role-theme-teacher .results-fullwidth::after {
    background: radial-gradient(ellipse at center bottom, rgba(253, 126, 20, 0.4) 0%, rgba(253, 126, 20, 0.1) 50%, transparent 80%);
}

/* Remove gap after footer on all pages */
footer {
    margin-bottom: 0 !important;
}

/* Fix footer positioning for quiz pages */
body.d-flex.flex-column.min-vh-90 {
    min-height: 100vh !important;
}

body.d-flex.flex-column.min-vh-90 footer {
    margin-top: auto !important;
}

/* Improve quiz page layout */
#landing2 {
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem !important;
    padding-top: 5rem !important; /* Extra space from navbar/toggle */
}

#landing2 .col-lg-6 {
    max-width: 800px;
    margin: 0 auto;
}

#landing2 h1 {
    margin-bottom: 2rem !important;
    font-size: 2.5rem;
    line-height: 1.2;
    color: white !important;
}

#landing2 .lead {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.6);
    padding: 1.5rem;
    border-radius: 0 !important;
    backdrop-filter: blur(10px);
    color: #34495e !important;
}

#landing2 .btn {
    margin-top: 2rem;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    border-radius: 25px;
}

/* Quiz instruction page specific styling - apply same glass panel and text colors as quiz cards */
#p1-title-1,
#part3-title {
    color: white !important;
}

#p1-1-text,
#p1-2-text,
#p1-3-text,
#part3-1-subtitle,
#part3-2-subtitle,
#part3-3-subtitle {
    color: #34495e !important;
    background: rgba(255, 255, 255, 0.6) !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
}

#p1-1-text {
    font-weight: bold !important;
}

#p1-2-text,
#p1-3-text {
    border-radius: 0 !important;
}

#part3-1-subtitle {
    font-weight: bold !important;
}

#part3-2-subtitle,
#part3-3-subtitle {
    border-radius: 0 !important;
}

/* Quiz running sections (Part 1, Part 1.2, Part 2) */
#part-container,
#part1-2-container {
    /* Remove white background, make transparent */
    background: transparent;
    /* Space away from navbar and footer */
    padding-top: 1rem !important;
    padding-bottom: 3rem !important;
    /* Ensure it visually fills the viewport behind footer */
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}

/* Give more width to the main column on quiz pages without affecting global .col-lg-6 */
#part-container .col-lg-6,
#part1-2-container .col-lg-6 {
    max-width: 960px;
}

/* Widen the actual quiz card */
#part-container #quiz-container,
#part1-2-container #quiz-container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Standardize quiz page layouts */
#part1-2-container {
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#part1-2-container h1 {
    margin-bottom: 2rem !important;
    font-size: 2.5rem;
    line-height: 1.2;
}

#part1-2-container .col-lg-6 {
    max-width: 800px;
    margin: 0 auto;
}

/* Transparent card wrapper for quiz title and content */
.quiz-card-wrapper {
    background: radial-gradient(ellipse 175% 125% at bottom, #a8d5ab 0%, #c8e6cb 15%, #d4f4e7 30%, #e8f8f0 50%, #f0f8f2 70%, #ffffff 85%, #ffffff 100%);
    padding: 2.5rem;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    margin: 2rem auto;
    width: 95%;
    max-width: 1200px;
    min-height: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Role-based quiz card wrapper background */
body.role-theme-teacher .quiz-card-wrapper {
    background: radial-gradient(ellipse 175% 125% at bottom, #ffd3a5 0%, #ffe0b3 15%, #ffedcc 30%, #fff4e0 50%, #fff8f0 70%, #ffffff 85%, #ffffff 100%);
}

/* Improve quiz container styling */
#quiz-container {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    margin: 0;
    box-shadow: none !important;
}

#question-container {
    background: transparent;
    padding: 1.5rem;
    padding-bottom: 0 !important;
    border-radius: 10px;
    margin-bottom: 0 !important;
}

/* Override Bootstrap mb-4 class on question container */
#question-container.mb-4 {
    margin-bottom: 0 !important;
}

/* Improve button styling */
.btn {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Quiz buttons styling */
.quiz-buttons .btn {
    min-width: 250px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 25px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.quiz-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.quiz-buttons .btn-success {
    background: #23ceac;
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(35, 206, 172, 0.3);
}

.quiz-buttons .btn-warning {
    background: #fd7e14;
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3);
}

.quiz-buttons .btn-success:hover {
    background: #1a9b85;
    color: white;
}

.quiz-buttons .btn-warning:hover {
    background: #e8690b;
    color: white;
}

/* Responsive adjustments for quiz page */
@media (max-width: 768px) {
    .quiz-fullwidth-card {
        padding: 1rem 0.5rem !important;
        margin: 0.25rem;
        border-radius: 0;
    }
    
    .quiz-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .quiz-section h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .quiz-section p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    .results-fullwidth {
        padding: 2rem 1rem;
        margin: 1rem 0 0 0;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .quiz-buttons .btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .btn-group .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .hero-section {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0 0.5rem;
    }
    
    /* Quiz instruction page mobile optimizations */
    #landing2 {
        padding: 1rem 0.75rem !important;
        margin: 0.5rem 0 !important;
    }
    
    #landing2 h1 {
        font-size: 1.8rem !important;
        margin-top: calc(-1rem + env(safe-area-inset-top, 0px)) !important;
        margin-bottom: 1.5rem !important;
        color: white !important;
    }
    
    /* Add top padding above quiz instruction page titles */
    #p1-title-1 {
        margin-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
    }
    
    #part3-title {
        margin-top: calc(2rem + env(safe-area-inset-top, 0px)) !important;
    }
    
    #landing2 .col-lg-6 {
        padding: 0 0.5rem;
    }
    
    #landing2 .lead {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
        color: #34495e !important;
        background: rgba(255, 255, 255, 0.6) !important;
        padding: 1.5rem !important;
        border-radius: 0 !important;
    }
    
    #landing2 .btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1.1rem;
        margin-top: 1.5rem !important;
    }
}

/* Ensure quiz page displays horizontally on larger screens */
@media (min-width: 769px) {
    /* Make quiz-content wider to match navbar width (slightly less) */
    .quiz-content {
        max-width: 1195px !important; /* Slightly less than navbar's 1200px */
        width: 94.5% !important; /* Slightly less than navbar's 95% */
    }
    
    /* Override hero-section break-out behavior on desktop */
    .quiz-page-container .hero-section {
        width: 100% !important; /* Fill quiz-content container */
        max-width: none !important;
        margin-left: 0 !important; /* Remove break-out margin */
        margin-right: 0 !important;
        flex-direction: row !important;
        gap: 2rem !important;
        padding: 0 2rem !important;
    }
    
    .quiz-info-above-buttons {
        gap: 2rem;
        padding: 3rem 1rem;
    }
    
    .quiz-info-title-only {
        font-size: 1.4rem;
    }
    
    .quiz-number {
        font-size: 1.5rem;
    }
    
    .quiz-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .quiz-buttons .btn {
        width: 100%;
        margin-bottom: 1rem;
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .results-card {
        padding: 1.25rem;
    }
    
    .results-content p {
        font-size: 0.9rem;
    }
    
    /* Extra small mobile optimizations */
    .quiz-card-wrapper {
        margin: 0.5rem auto;
        padding: 1rem 0.5rem;
        border-radius: 10px;
        max-width: calc(100vw - 1rem);
        width: 100%;
        box-sizing: border-box;
    }
    
    #question-container {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .question-text {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1rem;
        line-height: 1.4;
        min-height: calc(1.4em * 4);
        margin: 0 auto 1rem auto;
        padding: 0.5rem;
        text-align: center;
        height: calc(1.4em * 3);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    
    #part-container .answers,
    #part1-container .answers,
    #part1-2-container .answers,
    #part3-container .answers,
    .answers {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0.5rem !important;
    }
    
    #part-container .answers .form-check,
    #part1-container .answers .form-check,
    #part1-2-container .answers .form-check,
    #part3-container .answers .form-check,
    .answers .form-check {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    #part-container .answers .form-check-label,
    #part1-container .answers .form-check-label,
    #part1-2-container .answers .form-check-label,
    #part3-container .answers .form-check-label,
    .answers .form-check-label {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        font-size: 0.9rem;
        text-align: left !important;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
    }
    
    .quiz-navigation {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0.5rem !important;
        box-sizing: border-box !important;
    }
    
    .quiz-navigation .btn {
        margin: 0 !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem;
        min-height: 44px;
        box-sizing: border-box !important;
        flex-shrink: 1 !important;
    }
    
    /* Match desktop ratio: 30/70 split */
    #prev-btn.btn,
    #next-btn.btn {
        min-width: 0 !important;
        max-width: none !important;
    }
    
    #prev-btn.btn {
        flex: 3 1 0 !important;
    }
    
    #next-btn.btn {
        flex: 7 1 0 !important;
    }
    
    .quiz-navigation .btn-secondary {
        width: auto !important;
    }
    
    .quiz-navigation .btn-primary {
        width: auto !important;
    }
    
    .quiz-title {
        font-size: 1.3rem;
        margin-bottom: 0.875rem;
    }
    
    .result-section {
        padding: 0.875rem 0.5rem;
        margin-bottom: 0.875rem;
    }
    
    .result-section h4 {
        font-size: 1.1rem;
        margin-bottom: 0.625rem;
    }
    
    .result-section p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
    }
    
    .result-buttons-container .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
        min-height: 44px;
    }
    
    /* Quiz instruction page extra small mobile */
    #landing2 {
        padding: 0.75rem 0.5rem !important;
        margin: 0.25rem 0 !important;
    }
    
    #landing2 h1 {
        font-size: 1.6rem !important;
        margin-top: calc(-1rem + env(safe-area-inset-top, 0px)) !important;
        margin-bottom: 1.25rem !important;
        color: white !important;
    }
    
    /* Add top padding above quiz instruction page titles */
    #p1-title-1 {
        margin-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
    }
    
    #part3-title {
        margin-top: calc(2rem + env(safe-area-inset-top, 0px)) !important;
    }
    
    #landing2 .lead {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.875rem !important;
        color: #34495e !important;
        background: rgba(255, 255, 255, 0.6) !important;
        padding: 1.5rem !important;
        border-radius: 0 !important;
    }
    
    #landing2 .btn {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
        margin-top: 1.25rem !important;
    }
    
    /* Progress bar mobile optimization */
    .progress-container {
        margin: 0 auto 1.25rem auto;
        padding: 0 0.25rem;
    }
    
    .progress-text, .progress-percentage {
        font-size: 0.8rem;
    }
    
    /* Accordion extra small mobile */
    .accordion-button {
        font-size: 0.9rem;
        padding: 0.75rem;
    }
    
    .accordion-body {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
}

/* Extra small screens (360px and below) */
@media (max-width: 360px) {
    .quiz-card-wrapper {
        margin: 0.25rem auto;
        padding: 0.875rem 0.5rem;
        border-radius: 8px;
        max-width: calc(100vw - 1rem);
        width: 100%;
        box-sizing: border-box;
    }
    
    .question-text {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 0.95rem;
        line-height: 1.4;
        min-height: calc(1.4em * 4);
        margin: 0 auto 1rem auto;
        padding: 0.375rem;
        text-align: center;
        height: calc(1.4em * 3);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    
    #part-container .answers,
    #part1-container .answers,
    #part1-2-container .answers,
    #part3-container .answers,
    .answers {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0.5rem !important;
    }
    
    #part-container .answers .form-check,
    #part1-container .answers .form-check,
    #part1-2-container .answers .form-check,
    #part3-container .answers .form-check,
    .answers .form-check {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    #part-container .answers .form-check-label,
    #part1-container .answers .form-check-label,
    #part1-2-container .answers .form-check-label,
    #part3-container .answers .form-check-label,
    .answers .form-check-label {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        font-size: 0.85rem;
        min-height: 40px;
    }
    
    .quiz-navigation {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        justify-content: space-between !important;
    }
    
    .quiz-navigation .btn {
        margin: 0 !important;
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }
    
    .quiz-navigation .btn-secondary {
        width: 28% !important;
        flex: 0 0 28% !important;
    }
    
    .quiz-navigation .btn-primary {
        width: 70% !important;
        flex: 0 0 70% !important;
        min-height: 40px;
    }
    
    .quiz-title {
        font-size: 1.2rem;
    }
    
    .result-section {
        padding: 0.75rem 0.375rem;
    }
    
    .result-section h4 {
        font-size: 1rem;
    }
    
    .result-section p {
        font-size: 0.85rem;
    }
    
    .result-buttons-container .btn {
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
        min-height: 40px;
    }
    
    #landing2 {
        padding: 0.5rem 0.375rem !important;
    }
    
    #landing2 h1 {
        font-size: 1.4rem !important;
        margin-top: calc(-1rem + env(safe-area-inset-top, 0px)) !important;
        color: white !important;
    }
    
    /* Add top padding above quiz instruction page titles */
    #p1-title-1 {
        margin-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
    }
    
    #part3-title {
        margin-top: calc(2rem + env(safe-area-inset-top, 0px)) !important;
    }
    
    #landing2 .lead {
        font-size: 0.9rem !important;
        color: #34495e !important;
        background: rgba(255, 255, 255, 0.6) !important;
        padding: 1.5rem !important;
        border-radius: 0 !important;
    }
    
    #landing2 .btn {
        padding: 0.625rem 1rem;
        font-size: 0.95rem;
    }
    
    .progress-text, .progress-percentage {
        font-size: 0.75rem;
    }
    
    .accordion-button {
        font-size: 0.85rem;
        padding: 0.625rem;
    }
    
    .accordion-body {
        padding: 0.625rem;
        font-size: 0.8rem;
    }
}

/* Mobile touch optimization for quiz elements - CACHE BUST v4 */
/* Ensure consistent behavior across ALL devices with width <= 768px */
@media (max-width: 768px), (max-device-width: 768px), (orientation: portrait) and (max-width: 768px) {
    /* Mobile-only collapsible quiz cards - HIGH SPECIFICITY */
    /* Force mobile-only behavior - override any desktop styles - ULTRA HIGH SPECIFICITY */
    body .quiz-fullwidth-card .quiz-content-collapsible {
        max-height: 0px !important;
        opacity: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s ease-in-out, 
                    padding 0.3s ease-in-out !important;
        visibility: hidden !important;
    }
    
    /* Ensure expanded state works - ULTRA HIGH SPECIFICITY */
    body .quiz-fullwidth-card .quiz-content-collapsible.expanded {
        max-height: 800px !important; /* Increased for smooth animation */
        opacity: 1 !important;
        overflow: visible !important;
        padding: 0.5rem 0 !important; /* Remove horizontal padding */
        margin: 0 !important;
        border: none !important;
        visibility: visible !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s ease-in-out 0.1s, 
                    padding 0.3s ease-in-out !important;
    }
    .quiz-fullwidth-card {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        height: auto !important;
        transition: all 0.3s ease-in-out !important;
    }
    
    /* OVERRIDE FIXED HEIGHT ON MOBILE - Allow dynamic height */
    .quiz-fullwidth-card {
        min-height: auto !important;
        height: auto !important;
        flex: none !important; /* Override flex: 1 from desktop */
        align-self: flex-start !important; /* Align cards to top */
    }
    
    /* Remove any fixed height constraints */
    .hero-section {
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Center cards horizontally within container */
    .hero-section .row {
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 1rem !important; /* Proper gap between cards */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .hero-section .col-12 {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        padding: 0 0rem !important; /* Increased horizontal padding */
        margin: 0 !important;
    }
    
    /* Remove excessive padding from hero section */
    .hero-section {
        padding: 0.5rem 0.5rem !important; /* Add horizontal padding to hero section */
        margin: 0 !important;
    }
    
    /* Ensure consistent card width - fill mobile width */
    .quiz-fullwidth-card {
        width: 100% !important;
        max-width: 100% !important; /* Fill mobile width */
        min-width: auto !important;
        margin: 0.5rem 0 !important; /* Small margin for card separation */
        padding: 1rem !important; /* Consistent padding */
    }
    
    /* Ensure collapsed cards have no minimum height */
    .quiz-fullwidth-card .quiz-content-collapsible:not(.expanded) + * {
        margin-top: 0 !important;
        transition: margin-top 0.3s ease-in-out !important;
    }
    
    .quiz-fullwidth-card .quiz-content-collapsible.expanded + * {
        transition: margin-top 0.3s ease-in-out 0.2s !important;
    }
    
    .quiz-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 0 !important;
        cursor: pointer !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        transition: background-color 0.2s ease !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .quiz-header:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .quiz-title-section {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-align: left !important;
    }
    
    .quiz-header .quiz-number {
        margin: 0 !important;
        text-align: left !important;
        display: block !important;
        color: white !important;
        font-size: 1.4rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    
    .quiz-chevron {
        font-size: 1.2rem !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        color: white !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        transform-origin: center !important;
    }
    
    /* Rotate chevron when expanded */
    .quiz-header[aria-expanded="true"] .quiz-chevron {
        transform: rotate(180deg) !important;
    }
    
    .quiz-header[aria-expanded="false"] .quiz-chevron {
        transform: rotate(0deg) !important;
    }
    
    /* Removed conflicting rules - using simpler approach above */
    
    /* Ensure no duplicate titles show on mobile */
    .quiz-fullwidth-card > .quiz-number:not(.quiz-header .quiz-number),
    .quiz-fullwidth-card > .quiz-title:not(.quiz-header .quiz-title) {
        display: none !important;
    }
}

/* Desktop styles - hide collapsible functionality */
@media (min-width: 769px) {
    .quiz-header {
        display: block;
        cursor: default;
        padding: 0;
    }
    
    .quiz-header:hover {
        background-color: transparent;
    }
    
    .quiz-title-section {
        display: block;
    }
    
    .quiz-chevron {
        display: none !important;
    }
    
    .quiz-content-collapsible {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        display: block !important;
        visibility: visible !important;
    }
}

@media (max-width: 768px) {
    /* Ensure touch targets are at least 44px for accessibility */
    .answers .form-check-label {
        min-height: 48px;
        touch-action: manipulation;
    }
    
    .quiz-navigation .btn {
        min-height: 48px;
        touch-action: manipulation;
    }
    
    .result-buttons-container .btn {
        min-height: 48px;
        touch-action: manipulation;
    }
    
    /* Improve scrolling on mobile */
    .quiz-card-wrapper {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent zoom on input focus */
    input, select, textarea {
        font-size: 16px;
    }
    
    /* Optimize accordion for mobile */
    .accordion-button {
        min-height: 48px;
        touch-action: manipulation;
    }
    
    /* Fix quiz accordion spacing on mobile - remove extra height */
    .quiz-accordion-item {
        margin-bottom: 0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Remove all spacing from accordion collapse on mobile */
    .quiz-accordion-item .accordion-collapse {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure collapsed state has zero height on mobile */
    .quiz-accordion-item .accordion-collapse:not(.show) {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
    }
    
    /* Remove margin between header and collapse */
    .quiz-accordion-item .accordion-header {
        margin-bottom: 0 !important;
    }
    
    .accordion-button.quiz-accordion-button {
        padding: 0.75rem 1rem !important;
        min-height: auto !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }
    
    .accordion-body.quiz-accordion-body {
        padding: 0.75rem 1rem !important;
        margin: 0 !important;
    }
    
    /* Remove extra spacing from last element */
    .accordion-body.quiz-accordion-body > *:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Better spacing for mobile reading */
    .result-section p {
        margin-bottom: 1rem;
    }
    
    .result-section ul {
        margin-bottom: 1.25rem;
    }
    
    /* Mobile-friendly progress bar */
    .progress {
        height: 8px;
        border-radius: 4px;
    }
    
    .progress-bar {
        border-radius: 4px;
    }
}

/* Hide role toggle during active quiz */
body.in-quiz .role-toggle.quiz-hide {
    display: none !important;
}

/* NUCLEAR OPTION: Hide toggle on ALL quiz pages */
body:has(nav[data-quiz-page]) #globalRoleToggle,
body[data-quiz-page] #globalRoleToggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile Responsive Design - Balanced and Spacious */
@media (max-width: 768px) {
    /* FORCE MOBILE LAYOUT - Override everything */
    .hero-section .row {
        display: block !important;
        overflow: visible !important;
    }
    
    .hero-section .col-12 {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        overflow: visible !important;
    }
    
    .hero-section {
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    
    /* Home page specific - add top padding */
    #landing.hero-section {
        padding-top: calc(6rem + env(safe-area-inset-top, 0px)) !important;
    }
    
    /* Quiz instruction page - add top padding */
    .quiz-page-container {
        margin-top: calc(40px + env(safe-area-inset-top, 0px)) !important;
        padding-top: 0 !important;
    }
    
    .hero-section .logo-container {
        display: block !important;
        text-align: center !important;
        margin: 0 auto 1rem auto !important;
        width: 100% !important;
    }
    
    .hero-section .hero-title {
        display: block !important;
        text-align: center !important;
        margin: 0 auto 1rem auto !important;
        width: 100% !important;
    }
    
    .hero-section .hero-logo {
        display: none !important; /* Hide logo on mobile */
    }
    /* Global mobile optimizations */
    .container, .container-fluid {
        padding-left: 0.5rem !important; /* Reduced padding */
        padding-right: 0.5rem !important; /* Reduced padding */
        margin: 0 !important; /* Remove centering to use full width */
        max-width: 100vw !important; /* Never exceed viewport width */
        width: 100% !important; /* Ensure full width usage */
        box-sizing: border-box; /* Include padding in width calculation */
        overflow-x: hidden; /* Prevent horizontal overflow */
    }
    
    /* Override Bootstrap padding classes on ALL quiz containers - CRITICAL FIX */
    .section1.px-4,
    #part-container.px-4,
    #part1-container.px-4,
    #part1-2-container.px-4,
    #part3-container.px-4,
    .section1,
    #part-container,
    #part1-container,
    #part1-2-container,
    #part3-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 3rem !important;
        padding-bottom: 5rem !important;
        min-height: auto !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    
    /* Hide quiz title headings on mobile to save space */
    #p1-title-2,
    #p1-2-title,
    #part-container #part3-quiz-title,
    .quiz-card-wrapper > h1.display-5 {
        display: none !important;
    }
    
    /* Removed duplicate title generation rules */
    
    /* Override quiz section styles for collapsible content - HIGHEST PRIORITY */
    .quiz-fullwidth-card .quiz-content-collapsible .quiz-section {
        flex: none !important;
        display: block !important;
        background: rgba(255, 255, 255, 0.6) !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin: 0.5rem 0 !important; /* Remove auto margins, use full width */
        border-left: none !important;
        text-align: left !important;
        width: 100% !important; /* Fill full width */
        max-width: 100% !important;
        box-sizing: border-box !important; /* Include padding in width calculation */
    }
    
    .quiz-fullwidth-card .quiz-content-collapsible .quiz-section h3 {
        display: block !important;
        margin: 0 0 0.5rem 0 !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: #2c3e50 !important;
        text-align: left !important;
    }
    
    .quiz-fullwidth-card .quiz-content-collapsible .quiz-section p.lead {
        display: block !important;
        margin: 0 !important;
        font-size: 1rem !important;
        font-weight: 400 !important;
        text-align: left !important;
    }
    
    /* MOBILE BACKGROUND FIX - Use fixed positioned element for mobile */
    body {
        background: none !important; /* Remove body background */
        position: relative !important;
        overflow-x: hidden !important;
    }
    
    /* Create fixed background element for mobile */
    body::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-image: url("../../assets/images/EWS_BG_final1.png") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
        z-index: -999 !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
    
    /* Fix navbar positioning - keep it fixed at top - OVERRIDE ALL CONFLICTING STYLES */
    .navbar {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 95% !important;
        max-width: 1200px !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 25px !important;
        padding: 8px 16px !important;
        overflow: visible !important;
        transition: none !important;
        will-change: auto !important;
    }
    
    .navbar .container-fluid {
        overflow: visible !important;
        z-index: 1001 !important;
    }
    
    .navbar .navbar-nav {
        overflow: visible !important;
        z-index: 1002 !important;
    }
    
    /* Language dropdown - appear above navbar - MOBILE SPECIFIC */
    #languageSwitchMobile {
        position: relative !important;
        z-index: 1030 !important;
    }
    
    #languageSwitchMobile .dropdown-menu {
        z-index: 1031 !important;
        position: fixed !important;
        top: 60px !important;
        right: 20px !important;
        margin-top: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-10px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        /* Force mobile compatibility */
        -webkit-transform: translateY(-10px) !important;
        -webkit-transition: all 0.3s ease !important;
    }
    
    #languageSwitchMobile .dropdown-menu.show {
        transform: translateY(0) !important;
        -webkit-transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Force dropdown to appear on mobile devices */
    @media (max-device-width: 768px) {
        #languageSwitchMobile .dropdown-menu {
            position: fixed !important;
            top: 60px !important;
            right: 20px !important;
            z-index: 1001 !important;
            display: block !important;
        }
        
        #languageSwitchMobile .dropdown-menu.show {
            display: block !important;
        }
    }
    
    /* Add top padding to body to account for fixed navbar */
    body {
        padding-top: 80px !important;
    }
    
    /* Ensure other content has proper z-index */
    .quiz-page-container,
    .hero-section,
    .quiz-fullwidth-card,
    .footer {
        position: relative !important;
        z-index: 1 !important;
        background: transparent !important;
    }
    
    
    /* FORCE CONSISTENT RENDERING - Override any device-specific differences */
    * {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }
    
    /* Ensure hero section doesn't affect background */
    .hero-section {
        background: transparent !important;
    }
    
    /* Home page specific - add top padding */
    #landing.hero-section {
        padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important; /* More top padding on mobile with safe area */
    }
    
    /* Hide lightbulb icon on mobile */
    .hero-icon i.bi-lightbulb {
        display: none !important;
    }
    
    .hero-icon {
        display: none !important; /* Hide entire hero-icon container */
    }
    
    .hero-section::before {
        display: none !important; /* Disable conflicting background */
    }
    .quiz-fullwidth-card .quiz-content-collapsible:not(.expanded) {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Remove Bootstrap spacing from buttons container */
    .quiz-fullwidth-card .mt-auto {
        margin-top: 0 !important;
    }
    
    .quiz-fullwidth-card .pt-3 {
        padding-top: 0 !important;
    }
    
    /* Ensure buttons stick directly to header when collapsed */
    .quiz-fullwidth-card .quiz-content-collapsible:not(.expanded) + .mt-auto {
        margin-top: 0 !important;
        padding-top: 0.5rem !important;
    }
    
    
    /* Fix feature cards width */
    .feature-cards {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .feature-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Home page cards - balanced spacing */
    .card {
        margin: 0.5rem 0.5rem !important;
        padding: 0.75rem !important;
        border-radius: 8px;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
    
    .card-title {
        font-size: 1rem;
        margin-bottom: 0.5rem !important;
        line-height: 1.3;
    }
    
    .card-text {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 0.5rem !important;
    }
    
    /* Feature cards - nice spacing */
    .feature-cards {
        gap: 0.5rem !important; /* Reduced from 0.75rem to 0.5rem (25% reduction) */
        margin-bottom: 0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Keep cards same width */
    }
    
    .feature-card {
        margin-bottom: 0.5rem !important; /* Reduced from 0.75rem to 0.5rem */
        padding: 0.75rem 0.5rem !important; /* Vertical: 0.75rem, Horizontal: 0.5rem */
    }
    
    /* CTA section - reduce top margin on mobile */
    .cta-section.mt-5 {
        margin-top: 1rem !important; /* Reduced from 1.5rem to 1rem (33% reduction) */
    }
    
    .feature-card h3 {
        font-size: 1.05rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .feature-card p {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
    }
    
    .feature-card .bi {
        font-size: 1.5rem !important;
        margin-right: 0.75rem !important;
    }
    
    /* Project highlights - balanced */
    .project-highlights {
        gap: 0.5rem !important; /* Reduced from 0.75rem to 0.5rem (25% reduction) */
    }
    
    .highlight-item {
        margin-bottom: 0.5rem !important; /* Reduced from 0.75rem to 0.5rem */
        padding: 0.75rem 0.5rem !important; /* Vertical: 0.75rem, Horizontal: 0.5rem */
    }
    
    .highlight-item h3 {
        font-size: 1.05rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .highlight-item p {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
    }
    
    .highlight-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 0.5rem !important;
    }
    
    .highlight-icon i {
        font-size: 1.5rem !important;
    }
    
    /* Row gaps - reasonable reduction */
    .row.g-4 {
        gap: 0.5rem !important; /* Reduced from 0.75rem to 0.5rem (33% reduction) */
        row-gap: 0.5rem !important;
    }
    
    .row.g-3, .row.g-2 {
        gap: 0.375rem !important; /* Reduced from 0.5rem to 0.375rem (25% reduction) */
        row-gap: 0.375rem !important;
    }
    
    /* Tips and What's Next sections - spacious */
    .tips-section, .whats-next-section {
        margin: 0.5rem 0.5rem 1rem 0.5rem !important; /* Use full width with small margins */
        padding: 1rem 0.5rem !important; /* Increased horizontal padding */
        max-width: none !important; /* Remove width constraint */
        width: calc(100% - 1rem) !important; /* Full width minus margins */
    }
    
    /* Override h-100 Bootstrap class on mobile for Tips and What's Next */
    .tips-section.h-100, .whats-next-section.h-100 {
        min-height: auto !important;
        height: auto !important;
    }
    
    .tips-section h3, .whats-next-section h3 {
        font-size: 1.5rem !important; /* Increased for mobile */
        margin-bottom: 0.75rem !important;
        line-height: 1.3;
        text-align: center;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
    }
    
    /* Show icons in titles on mobile and position them on the left of the text */
    .tips-title i,
    .whats-next-title i {
        display: inline-block !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        font-size: 1.5rem !important;
        flex-shrink: 0;
        order: -1; /* Place icon before text */
    }
    
    /* Hide icons in tip-item on mobile */
    .tip-item i {
        display: none !important;
    }
    
    /* Center CTA button on mobile - make it bigger */
    .cta-button-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .cta-button-container .btn.quiz-main-btn {
        margin: 0 auto !important;
        width: 90% !important;
        max-width: 400px !important;
        min-height: 56px !important;
        height: 56px !important;
        padding: 12px 24px !important;
        font-size: 1.1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Make arrow bigger on mobile */
    .cta-button-container::before {
        font-size: 1.8rem !important;
    }
    
    .tips-section p, .whats-next-section p {
        font-size: 1rem; /* Increased from 0.95rem to 1rem (16px minimum) */
        line-height: 1.4; /* Optimized line spacing */
        margin-bottom: 0.75rem !important;
    }
    
    /* Section padding - balanced */
    .container-fluid.py-5 {
        padding-top: 1rem !important; /* Reduced from 1.5rem to 1rem (33% reduction) */
        padding-bottom: 1rem !important; /* Reduced from 1.5rem to 1rem (33% reduction) */
    }
    
    /* About section - spacious */
    .about-description {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .about-description p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 0.75rem !important;
    }
    
    /* Icons - appropriate size */
    .card i, .card svg {
        font-size: 1.75rem;
        margin-bottom: 0.5rem !important;
    }
    
    /* Column padding - comfortable */
    .col-12, .col-md-6, .col-lg-4 {
        padding-left: 0 !important; /* Remove padding from column containers */
        padding-right: 0 !important; /* Remove padding from column containers */
        margin: 0 auto; /* Center the column containers */
        max-width: 100vw !important; /* Never exceed viewport width */
        width: 100% !important; /* Ensure full width usage */
        display: flex !important;
        justify-content: center !important; /* Center content within columns */
        box-sizing: border-box; /* Include padding in width calculation */
        overflow-x: hidden; /* Prevent horizontal overflow */
    }
    
    /* Mobile touch optimization - hover states removed for better touch experience */
    /* Note: Hover-dependent states removed for mobile; using :active states for touch feedback */
    
    /* Section margins - spacious */
    section {
        margin-bottom: 1.5rem !important;
    }
    
    /* Quiz pages - minimal mobile spacing to fit within viewport */
    .quiz-card-wrapper {
        margin: 0.75rem auto;
        padding: 1.25rem 0.5rem;
        border-radius: 12px;
        min-height: auto;
        max-width: calc(100vw - 1rem);
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Force all quiz containers to full width with no overflow */
    #part-container .col-lg-12,
    #part-container .col-lg-12.mx-auto,
    #part-container .col-lg-6,
    #part-container #quiz-container,
    #part1-container .col-lg-12,
    #part1-container .col-lg-12.mx-auto,
    #part1-container #quiz-container,
    #part1-2-container .col-lg-12,
    #part1-2-container .col-lg-12.mx-auto,
    #part1-2-container #quiz-container,
    #part3-container .col-lg-12,
    #part3-container .col-lg-12.mx-auto,
    #part3-container #quiz-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    #question-container {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .question-text {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1.1rem;
        line-height: 1.5;
        min-height: calc(1.5em * 4);
        margin: 0 auto 1.25rem auto;
        padding: 0.75rem;
        text-align: center;
        height: calc(1.5em * 3);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    
    /* Center quiz answers on mobile - override desktop max-width */
    #part-container .answers,
    #part1-container .answers,
    #part1-2-container .answers,
    #part3-container .answers,
    .answers {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0.5rem !important;
        gap: 0.5rem;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    
    #part-container .answers .form-check,
    #part1-container .answers .form-check,
    #part1-2-container .answers .form-check,
    #part3-container .answers .form-check,
    .answers .form-check {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    
    #part-container .answers .form-check-label,
    #part1-container .answers .form-check-label,
    #part1-2-container .answers .form-check-label,
    #part3-container .answers .form-check-label,
    .answers .form-check-label {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 16px !important;
        font-size: 0.95rem;
        text-align: left !important;
        margin: 0 !important;
        border-radius: 10px;
        min-height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box !important;
    }
    
    .progress-container {
        width: 100%;
        margin: 0 auto 1.5rem auto;
        padding: 0 0.5rem;
    }
    
    .progress {
        width: 100%;
        margin: 0 0 1rem 0;
        height: 6px;
    }
    
    .progress-text, .progress-percentage {
        font-size: 0.85rem;
    }
    
    .quiz-navigation {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0;
        gap: 0.5rem !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }
    
    .quiz-navigation .btn {
        margin: 0 !important;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    .quiz-navigation .btn-secondary {
        width: 28% !important;
        flex: 0 0 28% !important;
    }
    
    .quiz-navigation .btn-primary {
        width: 70% !important;
        flex: 0 0 70% !important;
        min-height: 48px;
    }
    
    .quiz-title {
        font-size: 1.4rem;
        margin-bottom: 1rem;
        padding: 0;
        line-height: 1.3;
    }
    
    .progress-info {
        width: 100%;
        text-align: center;
        margin-bottom: 1rem;
        padding: 0;
    }
    
    .result-section {
        width: 100%;
        padding: 1rem 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    /* Remove horizontal padding from outer containers when they contain feedback section - full width on mobile */
    /* Only affects feedback pages, not question pages */
    #part-container:has(#feedback-section),
    #part1-container:has(#feedback-section),
    #part1-2-container:has(#feedback-section),
    #part3-container:has(#feedback-section) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Make quiz-card-wrapper full width on mobile when it contains feedback section only */
    /* Keep rounded edges and only remove horizontal margins */
    .quiz-card-wrapper:has(#feedback-section) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 12px !important; /* Keep rounded edges */
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Quiz feedback section mobile optimizations */
    #feedback-section {
        max-width: 100%;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    #feedback-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }
    
    .result-section h4 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
        line-height: 1.3;
    }
    
    .result-section p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 0.5rem;
    }
    
    .result-section ul {
        padding-left: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    .result-section li {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }
    
    /* Make middle section result divs full width on mobile while keeping rounded edges */
    #result-low,
    #result-medium,
    #result-high,
    #result-very-poor,
    #result-poor,
    #result-average,
    #result-good,
    #result-very-good {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 12px !important; /* Keep rounded edges */
    }
    
    /* Result buttons mobile optimization */
    .result-buttons-container {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }
    
    .result-buttons-container .btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        min-height: 48px;
    }
    
    /* Accordion mobile optimization */
    .accordion-button {
        font-size: 0.95rem;
        padding: 0.875rem;
        line-height: 1.4;
    }
    
    .accordion-body {
        padding: 0.875rem;
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Contact psychologist section - mobile responsive */
    #result-end {
        width: 100%;
        padding: 1rem;
        margin-right: 0;
        margin-left: 0;
    }
    
    .result-section h4 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .result-section p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    .accordion {
        width: 100%;
        margin: 0;
    }
    
    .accordion-button {
        font-size: 1rem;
        padding: 1rem;
    }
    
    .accordion-body {
        font-size: 1rem;
        line-height: 1.5;
        padding: 1rem;
    }
    
    /* Additional mobile accordion fixes for quiz 2 */
    .quiz-accordion-item {
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Remove all spacing from accordion collapse */
    .quiz-accordion-item .accordion-collapse {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure collapsed state has zero height */
    .quiz-accordion-item .accordion-collapse:not(.show) {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
    }
    
    /* Remove margin between header and collapse */
    .quiz-accordion-item .accordion-header {
        margin-bottom: 0 !important;
    }
    
    .accordion-button.quiz-accordion-button {
        padding: 0.75rem 1rem !important;
        min-height: auto !important;
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
    }
    
    .accordion-body.quiz-accordion-body {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    
    /* Remove extra spacing from last element */
    .accordion-body.quiz-accordion-body > *:last-child {
        margin-bottom: 0 !important;
    }
}

/* Quiz 1.1 middle section styling - left-aligned with subtle outline */
.result-section.middle-section,
.middle-section {
    text-align: left !important;
    border: 1px solid rgba(35, 206, 172, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    background: rgba(35, 206, 172, 0.15);
    box-shadow: 0 2px 8px rgba(35, 206, 172, 0.15);
    max-width: 100%;
    width: auto;
}

/* Teacher theme for middle section */
.role-theme-teacher .result-section.middle-section,
.role-theme-teacher .middle-section {
    border-color: rgba(253, 126, 20, 0.3);
    background: rgba(253, 126, 20, 0.15);
    box-shadow: 0 2px 8px rgba(253, 126, 20, 0.15);
}

/* Quiz accordion styling - matches quiz options */
.quiz-accordion-item {
    border: 1px solid rgba(35, 206, 172, 0.3);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    background: rgba(35, 206, 172, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Remove all spacing from accordion collapse container */
.quiz-accordion-item .accordion-collapse {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Ensure collapsed state has no height */
.quiz-accordion-item .accordion-collapse:not(.show) {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove any default Bootstrap spacing */
.quiz-accordion-item .accordion-collapse.collapse {
    transition: height 0.35s ease !important;
}

.quiz-accordion-item .accordion-collapse.collapsing {
    height: 0 !important;
    overflow: hidden !important;
    transition: height 0.35s ease !important;
}

.accordion-button.quiz-accordion-button {
    background: white !important;
    border: none !important;
    color: #333 !important;
    font-weight: 500;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.accordion-button.quiz-accordion-button:not(.collapsed) {
    background: rgba(35, 206, 172, 0.3) !important;
    color: #333 !important;
    border-radius: 12px 12px 0 0;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* Remove margin between button and collapse */
.quiz-accordion-item .accordion-header {
    margin-bottom: 0 !important;
}

.quiz-accordion-item .accordion-header + .accordion-collapse {
    margin-top: 0 !important;
}

.accordion-button.quiz-accordion-button:hover {
    background: rgba(35, 206, 172, 0.15) !important;
    color: #333 !important;
}

.accordion-button.quiz-accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(35, 206, 172, 0.25) !important;
    border-color: rgba(35, 206, 172, 0.4) !important;
}

.quiz-accordion-body {
    background: rgba(35, 206, 172, 0.05);
    color: #333;
    padding: 1.25rem;
    border-top: 1px solid rgba(35, 206, 172, 0.2);
    line-height: 1.6;
    margin: 0 !important;
    padding-top: 1.25rem !important; /* Ensure top padding is consistent */
}

/* Remove padding from last element in accordion body */
.quiz-accordion-body > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure accordion item has no extra padding */
.quiz-accordion-item {
    padding: 0 !important;
}

/* Remove any spacing that might appear between button and body */
.quiz-accordion-item .accordion-button + .accordion-collapse .accordion-body {
    margin-top: 0 !important;
    padding-top: 1.25rem !important;
}

/* Resources accordion - subtle distinguishing background */
#resourcesAccordion .quiz-accordion-item {
    background: rgba(255, 250, 245, 0.6);
    border-color: rgba(253, 126, 20, 0.15);
}

#resourcesAccordion .accordion-button.quiz-accordion-button {
    background: rgba(255, 250, 245, 0.4) !important;
}

#resourcesAccordion .accordion-button.quiz-accordion-button:not(.collapsed) {
    background: rgba(255, 250, 245, 0.8) !important;
}

#resourcesAccordion .accordion-button.quiz-accordion-button:hover {
    background: rgba(255, 250, 245, 0.7) !important;
}

#resourcesAccordion .quiz-accordion-body {
    background: rgba(255, 250, 245, 0.4);
    border-top-color: rgba(253, 126, 20, 0.1);
}

/* Teacher theme accordion - smoother colors */
.role-theme-teacher .quiz-accordion-item {
    border-color: rgba(253, 126, 20, 0.2);
    background: rgba(253, 126, 20, 0.05);
}

.role-theme-teacher .accordion-button.quiz-accordion-button {
    background: white !important;
}

.role-theme-teacher .accordion-button.quiz-accordion-button:not(.collapsed) {
    background: rgba(253, 126, 20, 0.15) !important;
}

.role-theme-teacher .accordion-button.quiz-accordion-button:hover {
    background: rgba(253, 126, 20, 0.08) !important;
}

.role-theme-teacher .accordion-button.quiz-accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(253, 126, 20, 0.15) !important;
    border-color: rgba(253, 126, 20, 0.25) !important;
}

.role-theme-teacher .quiz-accordion-body {
    background: rgba(253, 126, 20, 0.02);
    border-top-color: rgba(253, 126, 20, 0.1);
    
    .section-feedback {
        width: 100%;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    
    .result-buttons-container {
        width: 100%;
        padding: 0;
    }
    
    .result-buttons-container .btn {
        width: 100%;
        margin-bottom: 0.75rem;
    }
    
    /* Did You Know Page - full width usage - ZERO horizontal spacing */
    .glass-panel {
        margin: 0.5rem 0 !important; /* Remove ALL horizontal margins */
        padding: 1rem 0 !important; /* Remove ALL horizontal padding */
        border-radius: 12px;
    }
    
    /* Remove horizontal padding from glass-panel on mobile - override all other rules */
    .glass-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding: 1rem 0 !important; /* Override any other padding rules */
    }
    
    /* Specific override for Did You Know page glass-panel */
    #studentDYK .glass-panel,
    #teacherDYK .glass-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding: 1rem 0 !important;
    }
    
    /* Force override for all glass-panel elements on mobile */
    .glass-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding: 1rem 0 !important;
    }
    
    /* Remove ALL gaps from parent containers on mobile */
    .row.justify-content-center,
    .row.justify-content-center.text-center {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Force zero horizontal spacing on all container levels */
    .col-lg-10.col-xl-9,
    .col-lg-10,
    .col-xl-9 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .tab-content {
        width: 100%;
        padding: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .tip-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        border-radius: 0 !important;
    }
    
    .tip-card h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .tip-card h4 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .tip-card p {
        font-size: 1rem; /* Maintain 16px minimum */
        line-height: 1.4; /* Optimized line spacing */
        margin-bottom: 1rem;
    }
    
    .tip-card ul {
        font-size: 1rem;
        line-height: 1.6;
        padding-left: 1.5rem;
    }
    
    .tip-card li {
        margin-bottom: 0.5rem;
    }
    
    /* Hero section - spacious mobile layout */
    .hero-section {
        padding-top: 0 !important;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 0 !important;
    }
    
    /* Mobile hero container - force vertical layout */
    .hero-section .row.align-items-center {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .hero-section .col-12.col-md-6 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        text-align: center !important;
    }
    
    /* Force title to be centered (logo container is hidden) */
    .hero-section .hero-title {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto 1rem auto !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Hide page subtitle in mobile hero section */
    #page-subtitle, 
    .hero-intro, 
    p[data-i18n="hero.subtitle"],
    .hero-section p.hero-intro,
    .hero-section #page-subtitle,
    .col-12.col-md-6 p.hero-intro {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide logo container on mobile */
    .logo-container {
        display: none !important;
    }
    
    .hero-logo {
        display: none !important; /* Hide logo on mobile */
    }
    
    .hero-title {
        display: block !important;
        text-align: center !important;
        margin: 0 auto 1rem auto !important;
        width: 100% !important;
    }
    
    /* Force the column content to stack vertically and override Bootstrap */
    .hero-section .col-12.col-md-6.text-center.text-md-start {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-section .col-12.col-md-6 > * {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }
    
    /* Override Bootstrap text alignment classes */
    .hero-section .text-md-start {
        text-align: center !important;
    }
    
    /* Nuclear option - force everything to be centered and stacked */
    .hero-section .col-12.col-md-6.text-center.text-md-start .logo-container {
        display: none !important; /* Hide logo container on mobile */
    }
    
    .hero-section .col-12.col-md-6.text-center.text-md-start .hero-title {
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 0 auto 1rem auto !important;
    }
    
    /* Additional specific rule to hide logo on mobile */
    .hero-section .hero-logo {
        display: none !important;
    }
    
    .hero-section .logo-container .hero-logo {
        display: none !important;
    }
    
    /* Force hide logo with maximum specificity */
    .hero-section .logo-container.mb-3.mb-md-4 .hero-logo {
        display: none !important;
    }
    
    /* Hide logo container completely on mobile */
    .hero-section .logo-container.mb-3.mb-md-4 {
        display: none !important;
    }
    
    /* Lightbulb icon - reduced spacing */
    .hero-icon {
        margin-bottom: 0rem !important;
    }
    
    .hero-icon i {
        font-size: 2.5rem !important;
    }
    
    .hero-section h1 {
        font-size: 1.4rem; /* Reduced from 1.75rem to 1.4rem (20% reduction) */
        margin-top: 3rem !important; /* Add more space above title on mobile */
        margin-bottom: 1rem;
        line-height: 1.3;
    }
    
    /* More specific rule for hero title spacing on mobile */
    .hero-section .hero-title {
        margin-top: 3rem !important;
    }
    
    /* Target the specific page title element */
    #page-title {
        margin-top: 3rem !important;
    }
    
    /* Add more padding to hero content container on mobile */
    .hero-content.glass-panel {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }
    
    .hero-section p {
        font-size: 1rem; /* Maintain 16px minimum */
        line-height: 1.4; /* Optimized line spacing */
        margin-bottom: 1rem;
    }
    
    /* Column adjustments - comfortable padding */
    .col-lg-10, .col-xl-9, .col-md-12, .col-sm-12 {
        width: 100% !important;
        padding-left: 0 !important; /* Remove left padding from column containers */
        padding-right: 0 !important; /* Remove right padding from column containers */
        margin: 0; /* Remove centering to use full width */
        max-width: none !important; /* Remove width constraint */
    }
    
    /* Row adjustments */
    .row {
        margin: 0; /* Remove centering to use full width */
        padding: 0; /* Remove padding to prevent overflow */
        max-width: 100vw !important; /* Never exceed viewport width */
        width: 100% !important; /* Ensure full width usage */
        box-sizing: border-box; /* Include padding in width calculation */
        overflow-x: hidden; /* Prevent horizontal overflow */
    }
    
    /* Results fullwidth section - prominent on mobile */
    .results-fullwidth {
        min-height: 500px;
        padding: 2.5rem 1.5rem;
    }
    
    /* Button spacing - comfortable */
    .btn {
        margin-bottom: 0.75rem;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        width: 100% !important; /* Full width on mobile */
        min-height: 44px !important; /* Minimum touch target */
    }
    
    /* CTA buttons specific styling */
    .btn-primary-cta, .btn-secondary-cta {
        width: 100% !important;
        min-height: 44px !important;
        margin-top: 12px !important; /* 12-16px spacing between buttons */
    }
    
    /* Form elements - easy to use */
    .form-control, .form-select {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    /* Navigation - clean */
    .navbar {
        padding: 0.75rem;
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    /* Footer - readable */
    .footer {
        padding: 1.5rem 0.75rem;
    }
}

/* Psychologist Contact Form Styles */
#psychologist-contact-form .form-control:focus,
#psychologist-contact-form .form-select:focus {
    border-color: #23ceac;
    box-shadow: 0 0 0 0.2rem rgba(35, 206, 172, 0.25);
}

#psychologist-contact-form .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(35, 206, 172, 0.3);
    transition: all 0.2s ease;
}

/* School confirmation card - two column layout on desktop */
#psychologist-contact-form-container .alert-success {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100px;
}

@media (min-width: 768px) {
    #psychologist-contact-form-container .alert-success .row {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    #psychologist-contact-form-container .alert-success .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Desktop: vertical divider between columns */
    #psychologist-contact-form-container .alert-success .col-md-6:first-child {
        border-bottom: none !important;
        border-right: none !important;
        padding-bottom: 0 !important;
    }
    
    #psychologist-contact-form-container .alert-success .col-md-6:last-child {
        border-left: 1px solid #c3e6cb !important;
        padding-left: 1rem !important;
    }
}

/* Mobile: horizontal divider between rows */
@media (max-width: 767px) {
    #psychologist-contact-form-container .alert-success .row {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    #psychologist-contact-form-container .alert-success .col-md-6 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #psychologist-contact-form-container .alert-success .col-md-6:first-child {
        border-bottom: 1px solid #c3e6cb !important;
        border-right: none !important;
        padding-bottom: 1rem !important;
    }
    
    #psychologist-contact-form-container .alert-success .col-md-6:last-child {
        border-left: none !important;
        border-top: 1px solid #c3e6cb !important;
        padding-left: 0 !important;
        padding-top: 1rem !important;
    }
}

/* Contact psychologist section - same width constraints as result-section */
#result-end {
    margin-right: 0;
    margin-left: 0;
}

/* Standardize all feedback section containers */
#feedback-section > div {
    margin-right: 0;
    margin-left: 0;
    text-align: left;
    max-width: 100%; /* Ensure child divs don't exceed parent container */
}

/* Specific styling for email prompt text - center aligned */
#result-end p[style*="font-weight: 600"] {
    text-align: center !important;
}

/* Ensure consistent width for all result divs */
#result, 
#result-high, 
#result-medium, 
#result-low,
#result-very-poor,
#result-poor,
#result-average,
#result-good,
#result-very-good,
#result-proficient,
#result-competent,
#result-developing,
#result-emerging,
#result-needs-support,
#section-depression,
#section-sleep,
#section-appetite,
#section-anxiety,
#section-bodyimage,
#section-stress,
#section-socialisolation,
#section-socialmedia,
#section-violence,
#idk-message {
    margin-right: 0; /* Remove excessive margins since parent container is now constrained */
    margin-left: 0;
    text-align: left;
}

/* EWS Divider Component - Enhanced Reusable Version */
.ews-divider {
    position: relative;
    text-align: center;
    margin: 2rem 0 3rem 0;
    height: 1px; /* Reserve space for the line */
}

/* Horizontal line with gradient fade */
.ews-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(0, 0, 0, 0.1) 20%, 
        rgba(0, 0, 0, 0.2) 50%, 
        rgba(0, 0, 0, 0.1) 80%, 
        transparent 100%
    );
    z-index: 1;
}

/* Center circle with role-dependent colors */
.ews-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #6c757d; /* Default fallback color */
    border-radius: 50%;
    box-shadow: 
        0 0 0 4px #fff, /* White ring for light backgrounds */
        0 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    z-index: 2;
    transition: all 0.3s ease;
}

/* Role-dependent circle colors */
body.role-theme-student .ews-divider::after {
    background: #23ceac;
    box-shadow: 
        0 0 0 4px #fff,
        0 0 0 5px rgba(35, 206, 172, 0.2);
}

body.role-theme-teacher .ews-divider::after {
    background: #fd7e14;
    box-shadow: 
        0 0 0 4px #fff,
        0 0 0 5px rgba(253, 126, 20, 0.2);
}

/* Dark background adaptations */
.dark-background .ews-divider::before {
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 20%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.1) 80%, 
        transparent 100%
    );
}

.dark-background .ews-divider::after {
    box-shadow: 
        0 0 0 4px rgba(0, 0, 0, 0.8), /* Dark ring for dark backgrounds */
        0 0 0 5px rgba(255, 255, 255, 0.1);
}

.dark-background body.role-theme-student .ews-divider::after {
    box-shadow: 
        0 0 0 4px rgba(0, 0, 0, 0.8),
        0 0 0 5px rgba(35, 206, 172, 0.3);
}

.dark-background body.role-theme-teacher .ews-divider::after {
    box-shadow: 
        0 0 0 4px rgba(0, 0, 0, 0.8),
        0 0 0 5px rgba(253, 126, 20, 0.3);
}

/* Variant sizes */
.ews-divider.small {
    margin: 1rem 0 1.5rem 0;
}

.ews-divider.small::after {
    width: 8px;
    height: 8px;
    box-shadow: 
        0 0 0 3px #fff,
        0 0 0 4px rgba(0, 0, 0, 0.1);
}

.ews-divider.large {
    margin: 3rem 0 4rem 0;
}

.ews-divider.large::after {
    width: 16px;
    height: 16px;
    box-shadow: 
        0 0 0 5px #fff,
        0 0 0 6px rgba(0, 0, 0, 0.1);
}

/* Legacy support - keep old class for backward compatibility */
.divider-with-circle {
    position: relative;
    text-align: center;
    margin: 2rem 0 3rem 0;
    padding-bottom: 2rem;
}

.divider-with-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #6c757d 20%, #6c757d 80%, transparent);
}

.divider-with-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #6c757d;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff;
}

/* Role-dependent divider circle colors */
body.role-theme-student .divider-with-circle::after {
    background: #23ceac;
}

body.role-theme-teacher .divider-with-circle::after {
    background: #fd7e14;
}

/* White divider line on colored backgrounds */
.quiz-card-wrapper .divider-with-circle::before,
.glass-panel .divider-with-circle::before,
.hero-section .divider-with-circle::before {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.6) 80%, transparent);
}

/* Share EWS Pill Button - Grey outline, white background, pill shape */
.share-ews-pill-btn {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #2c3e50 !important;
    border-radius: 25px !important;
    padding: 0 !important;
    padding-left: 16px !important;
    height: 46px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.share-ews-pill-btn:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #2c3e50 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.share-ews-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 46px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: 0;
    flex-shrink: 0;
    margin-right: 0;
}

.share-ews-icon-circle i {
    font-size: 1.2rem;
    color: #2c3e50;
}

.share-ews-pill-btn:hover .share-ews-icon-circle {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    outline-color: rgba(0, 0, 0, 0.1);
}

.share-ews-pill-btn:hover .share-ews-icon-circle i {
    color: #2c3e50;
}

/* School Selection Modal Styling */
#schoolModal .modal-content {
    border-radius: 20px;
    border: none;
    overflow: visible;
}

#schoolModal .modal-header {
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%);
    color: white;
    border: none;
    padding: 1rem 1.5rem;
    text-align: center;
}

body.role-theme-teacher #schoolModal .modal-header {
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
}

#schoolModal .modal-header .modal-title {
    font-weight: 600;
    font-size: 1.3rem;
    width: 100%;
}

#schoolModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

#schoolModal .modal-header .btn-close:hover {
    opacity: 1;
}

#schoolModal .modal-body {
    padding: 2rem;
    overflow: visible;
}

#schoolModal .modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 0.75rem 1.5rem;
    background: #f8f9fa;
}

#schoolModal .modal-footer .btn-primary {
    background: linear-gradient(135deg, #23ceac 0%, #1a9b85 100%);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(35, 206, 172, 0.3);
    transition: all 0.3s ease;
}

body.role-theme-teacher #schoolModal .modal-footer .btn-primary {
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3);
}

#schoolModal .modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(35, 206, 172, 0.4);
}

body.role-theme-teacher #schoolModal .modal-footer .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(253, 126, 20, 0.4);
}

/* Modal centering and backdrop blur */
.modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-dialog {
    margin: 0 !important;
    max-width: 500px;
    width: 90%;
}

.modal-backdrop {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    background: rgba(0, 0, 0, 1) !important;
}

/* Share modal specific styling */
#share-modal .modal-dialog {
    max-width: 500px;
    width: 90%;
}

/* School modal specific styling */
#schoolModal .modal-dialog {
    max-width: 400px;
    width: 90%;
}

/* Share divider styling */
.share-divider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.share-divider-line {
    flex: 1;
    height: 1px;
    background: #dee2e6;
}

.share-divider-text {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Share section divider before link/QR */
.share-section-divider {
    height: 1px;
    background: #e9ecef;
    margin: 1rem 0 1rem 0;
}

.add-school-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a9b85 0%, #23ceac 100%);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(26, 155, 133, 0.25);
}

.add-school-banner__content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.add-school-banner__text {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.add-school-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    color: #1a9b85;
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.add-school-banner__cta i {
    font-size: 1.25rem;
    line-height: 1;
}

.add-school-banner__cta:hover,
.add-school-banner__cta:focus {
    transform: translateX(4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    color: #147562;
}

.add-school-banner--light {
    background: #f0faf6;
    color: #1a9b85;
    box-shadow: none;
}

.add-school-banner--light .add-school-banner__cta {
    background: #1a9b85;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(26, 155, 133, 0.25);
}

.add-school-banner--light .add-school-banner__cta:hover,
.add-school-banner--light .add-school-banner__cta:focus {
    transform: translateX(4px);
    box-shadow: 0 14px 28px rgba(26, 155, 133, 0.35);
    color: #ffffff;
}

.add-school-banner__content--inline {
    flex-wrap: nowrap;
}

.add-school-banner__text--inline {
    white-space: nowrap;
    font-weight: 600;
    color: #495057 !important;
    font-size: 0.9rem;
    text-align: right;
}

.add-school-banner--subtle {
    background: transparent;
    color: #1a9b85;
    border: none;
    box-shadow: none;
    padding: 0 1.5rem;
    border-radius: 0;
    margin: 1.5rem -1.5rem 0 -1.5rem;
    width: calc(100% + 3rem);
}

.add-school-banner--subtle .add-school-banner__cta {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #2c3e50 !important;
    padding: 0.45rem 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    gap: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Match Share button styling - same for all roles */
body.role-theme-student .add-school-banner--subtle .add-school-banner__cta,
body.role-theme-teacher .add-school-banner--subtle .add-school-banner__cta,
.add-school-banner--subtle .add-school-banner__cta {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #2c3e50 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.role-theme-student .add-school-banner--subtle .add-school-banner__cta:hover,
body.role-theme-student .add-school-banner--subtle .add-school-banner__cta:focus,
body.role-theme-teacher .add-school-banner--subtle .add-school-banner__cta:hover,
body.role-theme-teacher .add-school-banner--subtle .add-school-banner__cta:focus,
.add-school-banner--subtle .add-school-banner__cta:hover,
.add-school-banner--subtle .add-school-banner__cta:focus {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #2c3e50 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

body.role-theme-student .add-school-banner--subtle .add-school-banner__cta i,
body.role-theme-teacher .add-school-banner--subtle .add-school-banner__cta i,
.add-school-banner--subtle .add-school-banner__cta i {
    color: #2c3e50 !important;
    transition: color 0.2s ease;
}

body.role-theme-student .add-school-banner--subtle .add-school-banner__cta:hover i,
body.role-theme-student .add-school-banner--subtle .add-school-banner__cta:focus i,
body.role-theme-teacher .add-school-banner--subtle .add-school-banner__cta:hover i,
body.role-theme-teacher .add-school-banner--subtle .add-school-banner__cta:focus i,
.add-school-banner--subtle .add-school-banner__cta:hover i,
.add-school-banner--subtle .add-school-banner__cta:focus i {
    color: #2c3e50 !important;
}

.add-school-banner__cta--subtle {
    gap: 0.5rem;
    font-size: 0.95rem;
}

.add-school-banner--subtle .add-school-banner__text--inline {
    color: inherit;
}

.add-school-banner--subtle .add-school-banner__content--inline {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.add-school-banner--subtle .add-school-banner__cta--subtle i {
    font-size: 1rem;
}

.add-school-banner--subtle .add-school-banner__cta--subtle span {
    font-weight: 600;
}

.quiz-add-school-banner {
    text-align: left;
}

.quiz-add-school-banner__info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.add-school-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.add-school-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.4;
    color: inherit;
}

.add-school-step__number {
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.add-school-banner--light .add-school-step__number {
    background: rgba(26, 155, 133, 0.12);
    color: #1a9b85;
}

.add-school-step__text {
    flex: 1;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .add-school-banner__content:not(.add-school-banner__content--inline) {
        flex-direction: column;
        align-items: stretch;
    }

    .add-school-banner__cta {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .add-school-banner--subtle .add-school-banner__content--inline {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .add-school-banner--subtle .add-school-banner__text--inline {
        white-space: normal;
    }
}

/* School EWS Toggle Section */
.school-ews-toggle-section {
    max-width: 700px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.school-ews-toggle-header {
    background: rgba(35, 206, 172, 0.08);
    border-radius: 0;
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 0;
    margin-bottom: 2rem;
}

body.role-theme-teacher .school-ews-toggle-header {
    background: rgba(253, 126, 20, 0.08);
}

.school-ews-toggle-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
}

.school-ews-divider {
    display: none;
}

.school-ews-toggle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.school-ews-toggle-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e9ecef;
    position: relative;
    width: 100%;
    overflow: visible;
}

.school-ews-toggle-item {
    position: relative;
    background: transparent;
    border: none;
    color: #6c757d;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 2.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    flex: 1;
}

.school-ews-toggle-item.active {
    color: #23ceac;
    border-bottom-color: transparent; /* Hide default border, using ::after instead */
}

.school-ews-toggle-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    height: 3px;
    background: #23ceac;
    z-index: 1;
}

/* Extend line from middle to left for Yes (first button) - spans full left half of container */
.school-ews-toggle-item:first-child.active::after {
    left: 0;
    width: 100%;
}

/* Extend line from middle to right for No (second button) - spans full right half of container */
.school-ews-toggle-item:last-child.active::after {
    left: 0;
    width: 100%;
}

body.role-theme-teacher .school-ews-toggle-item.active {
    color: #fd7e14;
    border-bottom-color: transparent; /* Hide default border, using ::after instead */
}

body.role-theme-teacher .school-ews-toggle-item.active::after {
    background: #fd7e14;
}

.school-ews-toggle-item:hover {
    color: #495057;
}

.school-ews-toggle-item.active:hover {
    color: #23ceac;
}

body.role-theme-teacher .school-ews-toggle-item.active:hover {
    color: #fd7e14;
}

.school-ews-tab-content {
    display: none;
    padding-top: 1.5rem;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    min-height: 220px;
    height: 220px;
}

.school-ews-tab-content.active {
    display: block;
}

.school-ews-tab-content .add-school-steps {
    margin: 0 auto 1rem;
    display: inline-grid;
    text-align: left;
}

.school-ews-tab-content .add-school-step__number {
    background: rgba(35, 206, 172, 0.15);
    color: #1a9b85;
}

body.role-theme-teacher .school-ews-tab-content .add-school-step__number {
    background: rgba(253, 126, 20, 0.15);
    color: #d85d04;
}

.school-ews-tab-content .add-school-step__text {
    color: #495057;
}

/* Match Share button styling for school-ews-tab-content buttons */
.school-ews-tab-content .add-school-banner__cta--subtle,
body.role-theme-student .school-ews-tab-content .add-school-banner__cta--subtle,
body.role-theme-teacher .school-ews-tab-content .add-school-banner__cta--subtle {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #2c3e50 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.school-ews-tab-content .add-school-banner__cta--subtle:hover,
.school-ews-tab-content .add-school-banner__cta--subtle:focus,
body.role-theme-student .school-ews-tab-content .add-school-banner__cta--subtle:hover,
body.role-theme-student .school-ews-tab-content .add-school-banner__cta--subtle:focus,
body.role-theme-teacher .school-ews-tab-content .add-school-banner__cta--subtle:hover,
body.role-theme-teacher .school-ews-tab-content .add-school-banner__cta--subtle:focus {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #2c3e50 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.school-ews-tab-content .add-school-banner__cta--subtle i,
body.role-theme-student .school-ews-tab-content .add-school-banner__cta--subtle i,
body.role-theme-teacher .school-ews-tab-content .add-school-banner__cta--subtle i {
    color: #2c3e50 !important;
    transition: color 0.2s ease !important;
}

.school-ews-tab-content .add-school-banner__cta--subtle:hover i,
.school-ews-tab-content .add-school-banner__cta--subtle:focus i,
body.role-theme-student .school-ews-tab-content .add-school-banner__cta--subtle:hover i,
body.role-theme-student .school-ews-tab-content .add-school-banner__cta--subtle:focus i,
body.role-theme-teacher .school-ews-tab-content .add-school-banner__cta--subtle:hover i,
body.role-theme-teacher .school-ews-tab-content .add-school-banner__cta--subtle:focus i {
    color: #2c3e50 !important;
}

.school-ews-add-btn {
    padding: 0.45rem 1.4rem;
    border-radius: 999px;
    box-shadow: none;
}

.school-ews-add-btn i {
    font-size: 1rem;
}

body.role-theme-teacher .school-ews-add-btn {
    background: #fd7e14;
    color: #ffffff;
}

body.role-theme-teacher .school-ews-add-btn:hover,
body.role-theme-teacher .school-ews-add-btn:focus {
    background: #e66a0a;
    color: #ffffff;
}

@media (max-width: 768px) {
    .school-ews-toggle-section {
        margin: 1.5rem auto;
        padding: 0 0.75rem;
    }

    .school-ews-toggle-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .school-ews-toggle-section {
        padding: 0;
    }

    .school-ews-toggle-item {
        padding: 0.4rem 1.1rem;
        font-size: 0.9rem;
    }
}

/* Custom school suggestions dropdown */
.school-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    z-index: 1055; /* above modal content and backdrop */
    max-height: 240px;
    overflow-y: auto;
}

/* Ensure input container allows dropdown to overflow */
#contact-school-input-container {
    overflow: visible !important;
}

.school-suggestion-item {
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.school-suggestion-item:hover {
    background: #f8f9fa;
    box-shadow: inset 0 0 0 9999px rgba(35, 206, 172, 0.08);
}

/* EU funding logo in footer */
.eu-funded-logo {
    max-height: 40px;
    width: auto;
    height: auto;
    display: inline-block;
}

.eu-disclaimer-text {
    font-size: 0.75rem;
    color: #6c757d;
    max-width: 900px;
    margin: 0.75rem auto 0;
}