/* Pro Quiz QA Toggle - Frontend Styles */

/* INSTANT BUTTON LOADING - Critical Performance Optimization */
.hy-quiz-seo-button, .hy-quiz-seo-toggle-btn, .hy-quiz-seo-mark-btn, .hy-quiz-seo-button-container {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.hy-quiz-seo-button-container {
    display: flex !important;
}

.hy-quiz-seo-card {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Base card styles */
.hy-quiz-seo-card {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.hy-quiz-seo-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: #d1d1d1;
}

/* Question styles - Inline layout for seamless text flow */
.hy-quiz-seo-question {
    color: #000000;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 12px;
    display: block;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
}

.hy-quiz-seo-question.has-qno {
    /* No special styling needed for inline layout */
}

/* Anchor link - positioned before Q */
.hy-quiz-seo-anchor {
    text-decoration: none;
    opacity: 0.6;
    font-size: 14px;
    color: #666;
    margin-right: 4px;
    transition: opacity 0.2s ease;
    display: inline;
    vertical-align: baseline;
}

.hy-quiz-seo-anchor:hover {
    opacity: 0.9;
    color: #0d6efd;
}

/* Question number - clean format Q.1: */
.hy-quiz-seo-qno {
    color: #333333;
    font-weight: 600;
    font-size: 16px;
    margin: 0;
    display: inline;
    vertical-align: baseline;
}

/* Q: label styling */
.hy-quiz-seo-question strong {
    margin: 0;
    color: #333;
    font-weight: 600;
    display: inline;
    vertical-align: baseline;
}

/* Question text - styled inline for seamless flow */
.hy-quiz-seo-qtext {
    word-break: break-word;
    line-height: 1.5;
    color: #444;
    font-weight: 400;
    display: inline;
    vertical-align: baseline;
}

/* Professional button container - Horizontal layout guaranteed */
.hy-quiz-seo-button-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 4px; /* Consistent 4px gap between all buttons */
    margin-top: 12px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* Divider */
.hy-quiz-seo-divider {
    height: 1px;
    background: #e9ecef;
    margin: 12px 0;
    border-radius: 0px;
}

/* Options list */
.hy-quiz-seo-options {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    font-size: 15px;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    role: radiogroup;
}

.hy-quiz-seo-options li {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.2s ease;
}

.hy-quiz-seo-options li:last-child {
    border-bottom: none;
}

.hy-quiz-seo-options li:hover {
    background: #f8f9fa;
}

.hy-quiz-seo-options label {
    display: block;
    width: 100%;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    role: radio;
    aria-checked: false;
    transition: all 0.2s ease;
}

.hy-quiz-seo-radio {
    margin-right: 8px;
    flex-shrink: 0;
}

/* Button styles */
.hy-quiz-seo-button {
    background: #0d6efd;
    color: #ffffff;
    border: 0px solid #0d6efd;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(13,110,253,0.15);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
}

.hy-quiz-seo-button:hover {
    background: #0b5ed7;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(13,110,253,0.25);
    transform: translateY(-1px);
}

/* Toggle button - keep consistent size with fixed width */
.hy-quiz-seo-toggle-btn {
    padding: 8px 16px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    min-width: 130px !important;
    width: 130px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
    order: 1; /* Always appear first in button container */
}

/* Timer styles - smaller and professional */
.hy-quiz-seo-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    background: #0b5ed7;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border: 0px solid #0b5ed7;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hy-quiz-seo-timer .hy-quiz-seo-timer-seconds {
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: center;
    font-weight: 700;
}

/* Mark for review button - same size as toggle button */
.hy-quiz-seo-mark-btn {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    padding: 8px 16px; /* Match toggle button padding */
    border-radius: 8px; /* Match toggle button border radius */
    cursor: pointer;
    font-size: 15px; /* Match toggle button font size */
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    order: 2; /* Always appear after toggle button */
    min-width: 130px; /* Match toggle button width */
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
}

.hy-quiz-seo-mark-btn:hover {
    background: #ffeaa7;
    border-color: #f39c12;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(255,193,7,0.2);
}

.hy-quiz-seo-mark-btn.marked {
    background: #f39c12;
    color: #ffffff;
    border-color: #e67e22;
    box-shadow: 0 2px 8px rgba(243,156,18,0.3);
}

.hy-quiz-seo-mark-btn.marked:hover {
    background: #e67e22;
}

/* Answer section - Enhanced with animation support */
.hy-quiz-seo-answer {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.4s ease;
    margin-top: 0;
    padding: 0;
    border-radius: 8px;
    background: #f8f9fa;
    color: #212529;
    transform-origin: top center;
}

.hy-quiz-seo-answer.show {
    opacity: 1;
    padding: 12px;
    margin-top: 12px;
    border: 1px solid #e9ecef;
}

.hy-quiz-seo-answer-noscript {
    background: #f8f9fa;
    color: #212529;
    padding: 12px;
    border-radius: 8px;
    margin-top: 12px;
    border: 1px solid #e9ecef;
}

/* Feedback and explanation */
.hy-quiz-seo-feedback {
    margin-top: 10px;
}

.hy-quiz-seo-explanation {
    margin-top: 10px;
    padding: 12px;
    border-radius: 8px;
    background: #f8f9fa;
    color: #444;
    border: 1px solid #e9ecef;
    line-height: 1.5;
    font-weight: 400;
    /* CRITICAL FIX: Ensure proper text display and prevent garbled content */
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-family: inherit;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hy-quiz-seo-explanation strong {
    color: #333;
    font-weight: 600;
}

/* Enhanced Correct/Incorrect indicators with icons */
.hy-quiz-seo-correct {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #c3e6cb;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.hy-quiz-seo-correct:before {
    content: "✅";
    font-size: 16px;
    flex-shrink: 0;
}

.hy-quiz-seo-incorrect {
    background: linear-gradient(135deg, #f8d7da, #f1aeb5);
    color: #721c24;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #f1aeb5;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.hy-quiz-seo-incorrect:before {
    content: "❌";
    font-size: 16px;
    flex-shrink: 0;
}

/* Result display */
#hy-quiz-seo-result {
    margin-top: 16px;
    font-weight: 600;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border: 1px solid #e7e7e7;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

#hy-quiz-seo-result .hy-quiz-seo-meter {
    height: 20px;
    border-radius: 10px;
    background: #f1f3f5;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

#hy-quiz-seo-result .hy-quiz-seo-meter-bar {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, #28a745, #20c997, #17a2b8);
    width: 0%;
    transition: width 1s ease;
    box-shadow: 0 2px 4px rgba(40,167,69,0.3);
}

#hy-quiz-seo-result .hy-quiz-seo-meter-label {
    margin-top: 8px;
    font-weight: 600;
    color: #333;
}

/* Marked cards */
.hy-quiz-seo-card .hy-quiz-seo-flag {
    float: right;
    font-size: 12px;
    color: #f39c12;
    margin-left: 10px;
    font-weight: 600;
}

.hy-quiz-seo-card.marked {
    box-shadow: 0 4px 16px rgba(255,193,7,0.15);
    border-color: #f39c12;
    background: linear-gradient(135deg, #ffffff, #fffef7);
}

.hy-quiz-seo-card.marked:before {
    content: "📌";
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 14px;
    opacity: 0.7;
}

/* Enhanced accessibility */
.hy-quiz-seo-options label:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.hy-quiz-seo-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Professional loading animation */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.hy-quiz-seo-loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Mobile and responsive styles */
@media (max-width: 768px) {
    .hy-quiz-seo-card {
        padding: 14px;
        margin-bottom: 16px;
    }
    
    .hy-quiz-seo-question {
        font-size: 15px;
        gap: 4px;
    }
    
    .hy-quiz-seo-qno {
        font-size: 15px;
    }
    
    .hy-quiz-seo-qtext {
        font-size: 15px;
    }
    
    .hy-quiz-seo-button-container {
        gap: 4px; /* Consistent 4px gap for tablet */
        flex-direction: row !important; /* Force horizontal even on mobile */
        align-items: center;
        flex-wrap: nowrap; /* Prevent wrapping that could stack buttons */
    }
    
    .hy-quiz-seo-button {
        font-size: 14px;
        padding: 7px 14px;
    }
    
    .hy-quiz-seo-mark-btn {
        font-size: 14px; /* Match toggle button mobile size */
        padding: 7px 14px; /* Match toggle button mobile padding */
        min-width: 130px; /* Maintain consistent width */
    }
    
    .hy-quiz-seo-timer {
        font-size: 11px;
        padding: 3px 6px;
    }
}

@media (max-width: 480px) {
    .hy-quiz-seo-question {
        font-size: 14px;
        gap: 4px;
    }
    
    .hy-quiz-seo-qno {
        font-size: 14px;
    }
    
    .hy-quiz-seo-button-container {
        flex-direction: row !important; /* Keep horizontal layout */
        justify-content: flex-start;
        align-items: center;
        gap: 4px; /* Consistent 4px gap for mobile */
        flex-wrap: nowrap; /* Prevent stacking */
    }
    
    .hy-quiz-seo-button {
        flex: 0 1 auto;
        min-width: auto;
    }
    
    .hy-quiz-seo-mark-btn {
        flex: 0 0 auto;
        min-width: auto;
    }
}

/* Enhanced state indicators */
.hy-quiz-seo-option-selected {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
}

.hy-quiz-seo-option-correct {
    background: #e8f5e8 !important;
    border-color: #4caf50 !important;
}

.hy-quiz-seo-option-incorrect {
    background: #ffebee !important;
    border-color: #f44336 !important;
}

/* Professional transitions and animations */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Professional keyframe animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* Hide anchor link by default - shown on hover */
.hy-quiz-seo-anchor {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hy-quiz-seo-question:hover .hy-quiz-seo-anchor {
    opacity: 0.6;
}

.hy-quiz-seo-question:hover .hy-quiz-seo-anchor:hover {
    opacity: 1;
}

/* Enhanced focus states for accessibility */
.hy-quiz-seo-button:focus,
.hy-quiz-seo-mark-btn:focus,
.hy-quiz-seo-timer:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Loading animation */
.hy-quiz-seo-loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Success animation for correct answers */
.hy-quiz-seo-correct {
    animation: fadeInUp 0.5s ease;
}

/* Error animation for incorrect answers */
.hy-quiz-seo-incorrect {
    animation: fadeInUp 0.5s ease;
}

/* Perfect score celebration animation */
.hy-quiz-seo-celebration {
    animation: bounce 1s ease;
}

/* Enhanced option hover effects */
.hy-quiz-seo-options label:hover {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Professional card hover effect */
.hy-quiz-seo-card:hover {
    transform: translateY(-2px);
}

/* Button group responsive stacking */
@media (max-width: 640px) {
    .hy-quiz-seo-button-container {
        flex-direction: row !important; /* Always horizontal */
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap; /* Never allow wrapping */
    }
    
    .hy-quiz-seo-button {
        flex: 0 1 auto;
        margin-right: 0;
    }
    
    .hy-quiz-seo-button:last-child {
        margin-right: 0;
    }
    
    .hy-quiz-seo-mark-btn {
        flex: 0 0 auto;
        min-width: auto;
        order: 2 !important; /* Always after toggle button */
    }
    
    .hy-quiz-seo-toggle-btn {
        order: 1 !important; /* Always first */
    }
}

/* Enhanced timer warning states */
.hy-quiz-seo-timer-warning {
    animation: pulse 1s ease-in-out infinite;
    box-shadow: 0 2px 12px rgba(220,53,69,0.4) !important;
}

.hy-quiz-seo-timer-caution {
    box-shadow: 0 2px 12px rgba(253,126,20,0.4) !important;
}

/* Professional result meter animation */
.hy-quiz-seo-meter-bar {
    position: relative;
    overflow: hidden;
}

.hy-quiz-seo-meter-bar:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s ease-in-out;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Print styles */
@media print {
    .hy-quiz-seo-button,
    .hy-quiz-seo-mark-btn,
    .hy-quiz-seo-timer {
        display: none !important;
    }
    
    .hy-quiz-seo-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .hy-quiz-seo-answer {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hy-quiz-seo-card {
        border: 2px solid #000;
    }
    
    .hy-quiz-seo-button {
        border: 2px solid #000;
    }
    
    .hy-quiz-seo-options li {
        border: 1px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.hy-quiz-seo-qtext {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 640px) {
    .hy-quiz-seo-question {
        font-size: 14px;
        gap: 8px;
    }
    
    .hy-quiz-seo-qno {
        padding: 2px 6px;
        font-size: 12px;
    }
    
    .hy-quiz-seo-qtext {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    
    .hy-quiz-seo-question strong {
        display: inline-block;
    }
    
    .hy-quiz-seo-button {
        font-size: 14px;
        padding: 6px 12px;
    }
}

/* Button container ensures horizontal layout - remove conflicting wrapper styles */
.hy-quiz-seo-button-container .hy-quiz-seo-toggle-btn {
    order: 1;
}

.hy-quiz-seo-button-container .hy-quiz-seo-mark-btn {
    order: 2;
}

/* Remove old mark wrapper styles to prevent conflicts */
.hy-quiz-seo-mark-wrap {
    display: none !important; /* Deprecated - buttons now in button-container */
}

.hy-quiz-seo-mark-small.hy-quiz-seo-mark-btn {
    padding: 8px 16px; /* Match regular mark button */
    font-size: 15px; /* Match regular mark button */
    border-radius: 8px; /* Match regular mark button */
    min-width: 130px; /* Match toggle button width */
    box-shadow: none;
}

.hy-quiz-seo-timer-small {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
}

/* Ensure mark wrapper doesn't float */
.hy-quiz-seo-options + .hy-quiz-seo-mark-wrap {
    clear: both;
}

/* COMPREHENSIVE HOVER EFFECTS DISABLE - AGGRESSIVE OVERRIDE */
body.hy-quiz-seo-no-hover .hy-quiz-seo-card:hover,
.hy-quiz-seo-no-hover .hy-quiz-seo-card:hover,
body.hy-quiz-seo-no-hover .hy-quiz-seo-card:focus,
.hy-quiz-seo-no-hover .hy-quiz-seo-card:focus {
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
    border-color: #e7e7e7 !important;
    transform: none !important;
    transition: none !important;
}

/* OPTIONS HOVER EFFECTS - COMPLETE ELIMINATION */
body.hy-quiz-seo-no-hover .hy-quiz-seo-options li:hover,
.hy-quiz-seo-no-hover .hy-quiz-seo-options li:hover,
body.hy-quiz-seo-no-hover .hy-quiz-seo-options li:focus,
.hy-quiz-seo-no-hover .hy-quiz-seo-options li:focus,
body.hy-quiz-seo-no-hover .hy-quiz-seo-options li:active,
.hy-quiz-seo-no-hover .hy-quiz-seo-options li:active {
    background-color: #fafafa !important;
    background: #fafafa !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    border-color: #f0f0f0 !important;
}

body.hy-quiz-seo-no-hover .hy-quiz-seo-options label:hover,
.hy-quiz-seo-no-hover .hy-quiz-seo-options label:hover,
body.hy-quiz-seo-no-hover .hy-quiz-seo-options label:focus,
.hy-quiz-seo-no-hover .hy-quiz-seo-options label:focus,
body.hy-quiz-seo-no-hover .hy-quiz-seo-options label:active,
.hy-quiz-seo-no-hover .hy-quiz-seo-options label:active {
    background-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* RADIO BUTTON HOVER EFFECTS */
body.hy-quiz-seo-no-hover .hy-quiz-seo-radio:hover,
.hy-quiz-seo-no-hover .hy-quiz-seo-radio:hover,
body.hy-quiz-seo-no-hover .hy-quiz-seo-radio:focus,
.hy-quiz-seo-no-hover .hy-quiz-seo-radio:focus {
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

body.hy-quiz-seo-no-hover .hy-quiz-seo-button:hover,
.hy-quiz-seo-no-hover .hy-quiz-seo-button:hover,
body.hy-quiz-seo-no-hover .hy-quiz-seo-button:focus,
.hy-quiz-seo-no-hover .hy-quiz-seo-button:focus,
body.hy-quiz-seo-no-hover .hy-quiz-seo-toggle-btn:hover,
.hy-quiz-seo-no-hover .hy-quiz-seo-toggle-btn:hover {
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(13,110,253,0.15) !important;
    transform: none !important;
    transition: none !important;
}

body.hy-quiz-seo-no-hover .hy-quiz-seo-mark-btn:hover,
.hy-quiz-seo-no-hover .hy-quiz-seo-mark-btn:hover,
body.hy-quiz-seo-no-hover .hy-quiz-seo-mark-btn:focus,
.hy-quiz-seo-no-hover .hy-quiz-seo-mark-btn:focus {
    background-color: #fff3cd !important;
    background: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeeba !important;
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

body.hy-quiz-seo-no-hover .hy-quiz-seo-mark-btn.marked:hover,
.hy-quiz-seo-no-hover .hy-quiz-seo-mark-btn.marked:hover,
body.hy-quiz-seo-no-hover .hy-quiz-seo-mark-btn.marked:focus,
.hy-quiz-seo-no-hover .hy-quiz-seo-mark-btn.marked:focus {
    background-color: #f39c12 !important;
    background: #f39c12 !important;
    color: #ffffff !important;
    border-color: #e67e22 !important;
    transform: none !important;
    transition: none !important;
}

body.hy-quiz-seo-no-hover .hy-quiz-seo-anchor:hover,
.hy-quiz-seo-no-hover .hy-quiz-seo-anchor:hover,
body.hy-quiz-seo-no-hover .hy-quiz-seo-anchor:focus,
.hy-quiz-seo-no-hover .hy-quiz-seo-anchor:focus {
    opacity: 0.6 !important;
    color: #666 !important;
    transform: none !important;
    transition: none !important;
}

/* Disable ALL transitions and transforms when hover is disabled */
body.hy-quiz-seo-no-hover *,
.hy-quiz-seo-no-hover * {
    transition: none !important;
}

body.hy-quiz-seo-no-hover *:hover,
.hy-quiz-seo-no-hover *:hover {
    transform: none !important;
}

/* NUCLEAR OPTION - Force all option elements to maintain static appearance */
body.hy-quiz-seo-no-hover .hy-quiz-seo-options,
.hy-quiz-seo-no-hover .hy-quiz-seo-options {
    pointer-events: auto !important;
}

body.hy-quiz-seo-no-hover .hy-quiz-seo-options li,
.hy-quiz-seo-no-hover .hy-quiz-seo-options li {
    background-color: #fafafa !important;
    background: #fafafa !important;
}

body.hy-quiz-seo-no-hover .hy-quiz-seo-options li *,
.hy-quiz-seo-no-hover .hy-quiz-seo-options li * {
    transition: none !important;
    transform: none !important;
}

/* Read More / Read Less Functionality - Professional & Beautiful Design */
.hy-quiz-seo-has-read-more {
    position: relative;
}

.hy-quiz-seo-qtext-short,
.hy-quiz-seo-qtext-full {
    display: inline;
    position: relative;
}

.hy-quiz-seo-fade-indicator {
    color: #999;
    font-weight: normal;
    margin-left: 2px;
}

/* Read More/Read Less Button Styling - Professional and Attractive */
.hy-quiz-seo-read-more-btn,
.hy-quiz-seo-read-less-btn {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: none;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
    vertical-align: baseline;
    line-height: 1.2;
}

.hy-quiz-seo-read-more-btn:before,
.hy-quiz-seo-read-less-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.hy-quiz-seo-read-more-btn:hover,
.hy-quiz-seo-read-less-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a6fd8 0%, #6b4190 100%);
}

.hy-quiz-seo-read-more-btn:hover:before,
.hy-quiz-seo-read-less-btn:hover:before {
    left: 100%;
}

.hy-quiz-seo-read-more-btn:active,
.hy-quiz-seo-read-less-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Smooth fade in/out animations for text transitions */
.hy-quiz-seo-qtext-short,
.hy-quiz-seo-qtext-full {
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hy-quiz-seo-qtext-short.hy-quiz-seo-fade-out {
    animation-name: pqFadeOut;
}

.hy-quiz-seo-qtext-full.hy-quiz-seo-fade-in {
    animation-name: pqFadeIn;
}

.hy-quiz-seo-qtext-short.hy-quiz-seo-fade-in {
    animation-name: pqFadeIn;
}

.hy-quiz-seo-qtext-full.hy-quiz-seo-fade-out {
    animation-name: pqFadeOut;
}

@keyframes pqFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pqFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-5px);
    }
}

/* Mobile responsiveness for Read More buttons */
@media (max-width: 768px) {
    .hy-quiz-seo-read-more-btn,
    .hy-quiz-seo-read-less-btn {
        padding: 3px 8px;
        font-size: 10px;
        margin-left: 4px;
        border-radius: 15px;
    }
}

@media (max-width: 480px) {
    .hy-quiz-seo-read-more-btn,
    .hy-quiz-seo-read-less-btn {
        padding: 2px 6px;
        font-size: 9px;
        margin-left: 3px;
        border-radius: 12px;
        letter-spacing: 0.3px;
    }
}

/* Alternative button style for users who prefer minimal design */
.hy-quiz-seo-read-more-btn.minimal,
.hy-quiz-seo-read-less-btn.minimal {
    background: none;
    color: #007cba;
    border: 1px solid #007cba;
    box-shadow: none;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.hy-quiz-seo-read-more-btn.minimal:hover,
.hy-quiz-seo-read-less-btn.minimal:hover {
    background: #007cba;
    color: #ffffff;
    transform: none;
    box-shadow: none;
}