/* Quiz Widget Styles - Floating Window */
#lpro72-quiz-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 380px;
    height: 500px; /* Taller for better view */
    max-height: 80vh;
    background: #ffffff;
    color: #333333; /* Force dark text color */
    border: none;
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 5px 25px rgba(0,0,0,0.25); /* Deep shadow */
    z-index: 10000;
    display: flex;
    flex-direction: column; /* Vertical layout */
    overflow: visible; /* Changed from hidden to allow mascot overflow */
    font-family: 'Segoe UI', sans-serif;
    text-align: left; /* Prevent center alignment inheritance */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none; /* Click-through when hidden */
}

/* Mascot Style */
.quiz-mascot {
    position: absolute;
    top: -45px;
    left: -35px;
    width: 90px;
    height: auto;
    z-index: 10002;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    pointer-events: none; /* Let clicks pass through to header if needed, or auto */
    transform: rotate(-10deg);
}

#lpro72-quiz-widget.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Header Styles */
#lpro72-quiz-widget .quiz-header {
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 12px 12px 0 0; /* Manual radius since overflow is visible */
    padding-left: 50px; /* Space for mascot */
}

#lpro72-quiz-widget .quiz-header-controls button {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0 5px;
    font-size: 1.1rem;
    transition: color 0.2s;
}

#lpro72-quiz-widget .quiz-header-controls button:hover {
    color: #343a40;
}

/* Content Area */
#lpro72-quiz-widget .quiz-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 12px 12px; /* Bottom radius */
}

/* Progress Bar */
#lpro72-quiz-widget .quiz-progress {
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #6c757d;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Question Text */
#lpro72-quiz-widget .question-text {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Options List */
#lpro72-quiz-widget .quiz-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Ensure text is visible in inputs and labels inside the widget */
#lpro72-quiz-widget input[type="radio"],
#lpro72-quiz-widget input[type="checkbox"] {
    appearance: auto; /* Reset appearance to default */
    -webkit-appearance: auto;
    width: auto;
    height: auto;
    opacity: 1 !important;
    position: static !important;
    margin-right: 10px !important;
    display: inline-block !important;
}

#lpro72-quiz-widget label span {
    color: #333333 !important; /* Force dark text for options */
    font-size: 1rem;
}

#lpro72-quiz-widget .quiz-options-list label {
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Align center */
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    font-weight: normal; /* Reset Bootstrap bold label */
    margin-bottom: 8px; /* Spacing */
    background-color: #fff;
}

#lpro72-quiz-widget .quiz-options-list label:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

#lpro72-quiz-widget .multi-option-input {
    margin-top: 3px; /* Align with text top */
    margin-right: 10px !important;
}

/* Buttons inside widget */
#lpro72-quiz-widget .btn {
    border-radius: 4px;
    font-weight: 500;
    margin-top: 10px;
}

#lpro72-quiz-widget .feedback-msg {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    font-weight: 500;
}

#lpro72-quiz-widget .feedback-msg.success {
    background-color: #d4edda;
    color: #155724;
}

#lpro72-quiz-widget .feedback-msg.error {
    background-color: #f8d7da;
    color: #721c24;
}

#lpro72-quiz-widget.minimized {
    height: 60px; /* Only header visible */
    transform: translateY(0);
    overflow: visible; /* Changed from hidden to keep mascot visible */
    border-radius: 12px; /* Full rounded corners when minimized */
}

#lpro72-quiz-widget.minimized .quiz-content {
    display: none; /* Hide content to prevent overflow */
}

#lpro72-quiz-widget.minimized .quiz-header {
    border-radius: 12px; /* Full rounded corners for header too */
}

#lpro72-quiz-widget .quiz-header {
    width: 100%;
    height: 60px;
    background: linear-gradient(135deg, #337ab7 0%, #2e6da4 100%);
    color: white;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer; /* Allow clicking header to toggle minimize? */
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-left: 90px; /* Increased space for mascot */
}

#lpro72-quiz-widget .quiz-header strong {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: block;
}

#lpro72-quiz-widget .quiz-header-controls {
    display: flex;
    gap: 8px;
}

/* Window Buttons (Mac-style or modern) */
#lpro72-quiz-widget .quiz-header button {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

#lpro72-quiz-widget .quiz-header button:hover {
    background: rgba(255,255,255,0.4);
}

#lpro72-quiz-widget .quiz-header button#minimize-quiz {
    font-weight: bold;
    padding-bottom: 5px; /* Adjust dash alignment */
}

#lpro72-quiz-widget .quiz-header button#close-quiz {
    background: rgba(255, 59, 48, 0.8); /* Red for close */
}
#lpro72-quiz-widget .quiz-header button#close-quiz:hover {
    background: rgba(255, 59, 48, 1);
}

#lpro72-quiz-widget .quiz-content {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #fdfdfd;
}

/* Scrollbar styling */
#lpro72-quiz-widget .quiz-content::-webkit-scrollbar {
    width: 6px;
}
#lpro72-quiz-widget .quiz-content::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* Adjust inner content */
#quiz-start-screen, #quiz-question-screen, #quiz-result-screen {
    width: 100%;
    max-width: 100%;
}

#quiz-question-screen {
    flex-direction: column; /* Stack vertically in window */
    gap: 15px;
}

.quiz-right-col {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

#widget-options {
    grid-template-columns: 1fr; /* Stack options */
    gap: 8px;
}

#lpro72-quiz-widget .options-list label {
    padding: 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0;
    transition: all 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#lpro72-quiz-widget .options-list label:hover {
    background: #f0f8ff;
    border-color: #337ab7;
}

/* Hide Footer when Game Mode is active */
/* Note: With floating window, we might NOT want to hide the footer entirely, 
   but the user requested persistent quiz. Let's keep hiding mascotte/footer 
   to focus attention, or maybe just mascotte? 
   User said: "le questionnaire n'enleve toujours pas la mascotte" -> Focus on Mascotte.
   User said: "je voudrais que le questionnaire soit en fenetre au moment d'ouvreture... et non ouvert completement"
   This implies they want to browse while quizzing?
   If they want to browse, we should NOT hide the footer/content.
   I will ONLY hide the chatbot and back-to-top.
*/
body.game-mode #lpro72-chatbot-widget,
body.game-mode #back-to-top {
    display: none !important;
}

/* Ensure body has padding not needed for floating window */
body.game-mode {
    padding-bottom: 0 !important;
}

@media (max-width: 480px) {
    #lpro72-quiz-widget {
        right: 0;
        bottom: 0;
        width: 100%;
        height: 60vh;
        border-radius: 12px 12px 0 0;
    }
}

#lpro72-chatbot-widget {
    position: fixed;
    right: 20px;
    bottom: 10px; /* Remonté de 10px supplémentaires */
    z-index: 900;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

@media print {
    #lpro72-chatbot-widget {
        display: none !important;
    }
}

/* Style du carrousel de mascotte */
#lpro72-chatbot-avatar-container {
    width: 140px; /* Largeur ajustée */
    height: 180px; /* Hauteur augmentée pour éviter la coupure */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Transformation appliquée au conteneur pour l'effet global */
    transform-origin: bottom right;
}

.lpro72-avatar-carousel {
    display: flex;
    transition: transform 0.4s ease-in-out;
    height: 100%;
}

.lpro72-avatar-item {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.lpro72-avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.lpro72-carousel-nav {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    z-index: 10;
}

.lpro72-carousel-dot {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}

.lpro72-carousel-dot.active {
    background-color: #ff7f00;
    transform: scale(1.2);
}

.lpro72-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

#lpro72-chatbot-avatar-container:hover .lpro72-carousel-arrow {
    opacity: 1;
}

.lpro72-carousel-prev { left: 2px; }
.lpro72-carousel-next { right: 2px; }

#lpro72-chatbot-bubble {
    background-color: #ff7f00;
    color: #ffffff;
    border-radius: 20px;
    padding: 10px 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin-bottom: 50px; /* Ajustement pour compenser la position basse du widget */
}

#lpro72-chatbot-bubble-text {
    margin-right: 8px;
}

#lpro72-chatbot-close {
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

#lpro72-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background-color: #222222;
    color: #ffffff;
    padding: 15px;
    font-size: 14px;
}

#lpro72-cookie-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

#lpro72-cookie-banner-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lpro72-cookie-btn {
    border-radius: 4px;
    border: none;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
}

.lpro72-cookie-btn-primary {
    background-color: #28a745;
    color: #ffffff;
}

.lpro72-cookie-btn-secondary {
    background-color: #6c757d;
    color: #ffffff;
}

.lpro72-cookie-btn-outline {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

#lpro72-cookie-preferences {
    margin-top: 10px;
    font-size: 13px;
}

#lpro72-cookie-preferences label {
    display: block;
}

#mentions-legales-link,
#mentions-legales-link:visited,
#mentions-legales-link:hover,
#mentions-legales-link:focus,
#mentions-legales-link:active {
    color: #ffffff !important;
}

.copyright-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0;
    width: 100%;
}

.copyright-text {
    margin: 0;
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
}

.footer-link,
.footer-link:visited {
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    padding: 0px 0px;
    border-radius: 4px;
}

.footer-link:hover,
.footer-link:focus,
.footer-link:active {
    color: #ffffff !important;
    text-decoration: underline !important;
}

footer {
    background-color: #333333;
    padding: 10px 0;
    position: relative;
    margin-top: 0px;
    width: 100%;
}

/* Style du bouton retour en haut */
.back-to-top-button {
    position: fixed;
    bottom: 120px;
    left: 20px; /* Déplacé à gauche */
    right: auto;
    width: 40px;
    height: 40px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1000;
}

.back-to-top-button:hover {
    background-color: #0056b3;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top-button.visible {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 576px) {
    .copyright-container {
        flex-direction: row; /* Maintenir en ligne même sur mobile */
        text-align: center;
        gap: 10px;
        padding: 10px 15px;
    }
    
    .copyright-text, .footer-link {
        font-size: 12px; /* Texte légèrement plus petit sur mobile */
    }
    
    .back-to-top-button {
        bottom: 110px;
        left: 10px; /* Déplacé à gauche sur mobile */
        right: auto;
    }

    #lpro72-chatbot-widget {
        right: 10px;
        bottom: -20px; /* Ajustement mobile pour la position abaissée */
    }
}

#cookie-settings-button {
    background-color: #333333;
    border: 1px solid #333333;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 50px;
}

#cookie-settings-button:hover,
#cookie-settings-button:focus,
#cookie-settings-button:active {
    background-color: #333333;
    color: #ffffff !important;
}

#start-quiz-button {
    background-color: #333333;
    border: 1px solid #333333;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 50px;
}

#start-quiz-button:hover,
#start-quiz-button:focus,
#start-quiz-button:active {
    background-color: #333333;
    color: #ffffff !important;
}


#lpro72-cookie-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    backdrop-filter: blur(5px);
}