/* Modern Learning Container - Clean & Accessible */
.zodynas-learning-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 70vh;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    margin: 24px 0;
    border: 1px solid rgba(148, 163, 184, 0.1);
    position: relative;
}

/* Mobile responsive adjustments - Clean and Simple */
@media (max-width: 768px) {
    .zodynas-learning-container {
        flex-direction: column;
        min-height: auto;
        margin: 0;
        border-radius: 12px;
        position: relative;
        align-items: stretch;
        gap: 20px;
    }

    /* Content takes full width, sidebar is collapsible */
    .zodynas-content {
        flex: 1 1 auto;
        width: 100%;
        order: 1;
        margin-bottom: 0;
    }

    .zodynas-sidebar {
        flex: 0 0 auto;
        width: 100%;
        order: 2;
        margin-top: 0;
        max-height: 60vh; /* Limit sidebar height */
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

/* Modern UI/UX Improvements */

/* Content Transition Animations */
.zodynas-content {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
    opacity: 1;
}

.zodynas-content.fade-out {
    opacity: 0;
    transform: translateX(-20px);
}

.zodynas-content.fade-in {
    opacity: 1;
    transform: translateX(0);
    animation: slideInFromRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyframe Animations */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Enhanced Button Styles */
.zodynas-content .button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.zodynas-content .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.zodynas-content .button:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

.zodynas-content .button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

.zodynas-content .button:active::before {
    width: 300px;
    height: 300px;
}

/* Confetti Animation */
.confetti-piece {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    z-index: 9999;
    animation: confettiFall 4s linear forwards;
    pointer-events: none;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Enhanced Celebration Animations */
.celebration-bounce {
    animation: celebrationBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes celebrationBounce {
    0% {
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.celebration-slide-up {
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

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

.celebration-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

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

.celebration-options-appear {
    animation: optionsAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

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

/* 🎨 UNIFIED BUTTON DESIGN SYSTEM - Perfect Consistency Across All Buttons */
.zodynas-btn, .zodynas-btn *,
.zodynas-content .moku-button,
.zodynas-content .nemoku-button,
.celebration-btn,
.reset-button,
.back-button,
.word-item button {
display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 5px 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s 
cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    color: white !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    min-height: 15px !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.zodynas-btn:hover, .zodynas-btn *:hover,
.zodynas-content .moku-button:hover,
.zodynas-content .nemoku-button:hover,
.celebration-btn:hover,
.reset-button:hover,
.back-button:hover,
.word-item button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.zodynas-btn:active, .zodynas-btn *:active,
.zodynas-content .moku-button:active,
.zodynas-content .nemoku-button:active,
.celebration-btn:active,
.reset-button:active,
.back-button:active,
.word-item button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition-duration: 0.1s !important;
}

/* 🎯 PERFECT ICON CONSISTENCY */
.btn-icon,
.word-item button::before,
.zodynas-content .moku-button::before,
.zodynas-content .nemoku-button::before {
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

/* Word Item Layout and Ellipsis */
.word-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    gap: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.word-item > span {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
}

.word-item > div {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    width: auto;
}

.word-item button {
    flex-shrink: 0;
    min-width: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0 0 0 2px;
}

.word-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.word-item button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
}

.word-item:hover button {
    opacity: 1;
}

/* Sidebar Filter Button Colors */
.moku-filter .word-item button {
    background: linear-gradient(135deg, #4CAF50, #45a049) !important;
    color: white !important;
}

.nemoku-filter .word-item button {
    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
    color: white !important;
}

/* Explicit rule for small moku buttons to match gradient used in sidebar */
button.moku-btn {
    width: 24px;
    height: 24px;
    margin-left: 0;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    background: linear-gradient(135deg, #4CAF50, #45a049) !important;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    color: white !important;
}

/* Explicit rule for small nemoku buttons to match gradient used in sidebar */
button.nemoku-btn {
    width: 24px;
    height: 24px;
    margin-left: 0;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    color: white !important;
}

/* Bottom Notification Styles */
.zodynas-bottom-notification {
    position: fixed;
    bottom: -100px; /* Start below screen */
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(135deg, #075fb7, #075fb7);
    color: white;
    padding: 20px;
    text-align: center;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid #075fb7;
}

.zodynas-bottom-notification.show {
    bottom: 0; /* Slide up to bottom of screen */
}

.zodynas-bottom-notification .notification-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.zodynas-bottom-notification .notification-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.zodynas-bottom-notification .notification-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* Mobile adjustments for bottom notification */
@media (max-width: 768px) {
    .zodynas-bottom-notification {
        padding: 16px 20px;
    }

    .zodynas-bottom-notification .notification-content {
        gap: 10px;
    }

    .zodynas-bottom-notification .notification-icon {
        font-size: 20px;
    }

    .zodynas-bottom-notification .notification-text {
        font-size: 14px;
    }
}

/* Success Animations */
.word-item.completed {
    animation: completedPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes completedPulse {
    0% {
        background: rgba(46, 204, 113, 0.1);
        transform: scale(1);
    }
    50% {
        background: rgba(46, 204, 113, 0.2);
        transform: scale(1.02);
    }
    100% {
        background: rgba(46, 204, 113, 0.1);
        transform: scale(1);
    }
}

/* Reveal Section Animation */
.zodynas-word-details {
    animation: revealSlideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes revealSlideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

.zodynas-sidebar {
    flex: 0 0 30%;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 28px;
    border-right: 1px solid rgba(148, 163, 184, 0.2);
    overflow-y: auto;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

/* Desktop: Hide mobile sidebar popup */
@media (min-width: 769px) {
    .mobile-sidebar-popup,
    .mobile-sidebar-toggle {
        display: none !important;
    }
}

/* Mobile Layout - Use Desktop Flex Layout */
@media (max-width: 768px) {
    /* Prevent body scrolling when zodynas is active */
    body.has-zodynas-active {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Make zodynas content full height and overlap header/footer */
    .zodynas-learning-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important; /* Allow internal scrolling if needed */
    }

    .zodynas-content {
        width: 100% !important;
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        padding: 20px 10px !important;
        gap: 40px !important;
        height: calc(100vh - 40px) !important; /* Account for container padding */
        box-sizing: border-box !important;
    }

    /* Better mobile typography */
    .word-title-right {
        font-size: 18px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    /* Larger touch targets for mobile */
    .moku-button, .nemoku-button {
        padding: 16px 24px !important;
        font-size: 16px !important;
        min-width: 120px !important;
        margin: 8px !important;
    }

    /* Better button layout on mobile - INLINE with gap */
    .button-section {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        padding-top: 20px !important;
        flex-wrap: wrap !important;
    }

    /* Better reveal button */
    .reveal-button {
        padding: 10px 40px !important;
        font-size: 16px !important;
        min-width: 100% !important;
        max-width: 100% !important;
		place-content: center;

    }

    /* Better celebration layout */
    .celebration-in-content {
        padding: 20px !important;
    }

    .celebration-in-content h2 {
        font-size: 32px !important;
    }

    .celebration-in-content p {
        font-size: 18px !important;
    }

    .celebration-btn {
        padding: 16px 20px !important;
        font-size: 16px !important;
    }

    /* Hide sidebar on mobile - show in popup instead */
    .zodynas-sidebar {
        display: none !important;
    }

    /* Mobile Sidebar Popup - CLICKABLE VERSION */
    .mobile-sidebar-popup {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: 10000 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        /* Removed pointer-events: none - will handle clicks via JavaScript */
    }

    .mobile-sidebar-popup.show {
        display: flex !important;
    }

    .mobile-sidebar-content {
        background: white !important;
        border-radius: 0px !important;
        width: 100vw !important;
        max-width: 400px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        position: relative !important;
        overflow: hidden !important;
        
        z-index: 10001 !important;
        /* Content can receive clicks normally */
    }

    .mobile-sidebar-body {
        z-index: 10002 !important;
    }

    /* Ensure all interactive elements in popup work */
    .mobile-sidebar-popup .word-item,
    .mobile-sidebar-popup button,
    .mobile-sidebar-popup .moku-btn,
    .mobile-sidebar-popup .nemoku-btn,
    .mobile-sidebar-popup .reset-button,
    .mobile-sidebar-popup .back-button {
        cursor: pointer !important;
        z-index: 10003 !important;
        position: relative !important;
        /* No pointer-events override needed - let them work normally */
    }

    .mobile-sidebar-header {
        display: flex !important;
        align-items: baseline;
        justify-content: left;
        text-align: left;
        padding: 10px 20px;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
        position: relative !important;
        z-index: 10003 !important;
    }

    .mobile-sidebar-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #2c3e50 !important;
        margin: 0 !important;
        flex: 1 !important;
        text-align: left !important;
    }

    .mobile-sidebar-close {
        background: #ffffff !important;
        border: 2px solid #dee2e6 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        font-size: 15px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        padding: 6px !important;
        border-radius: 50% !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #6c757d !important;
        transition: all 0.2s ease !important;
        position: absolute !important;
        right: 0px !important;
        top: 0% !important;
        transform: translateY(-0%) !important;
        z-index: 10005 !important;
    }

    .mobile-sidebar-close:hover {
        background: #f8f9fa !important;
        border-color: #adb5bd !important;
        color: #495057 !important;
        transform: translateY(-50%) scale(1.1) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }

    .mobile-sidebar-close:active {
        transform: translateY(-50%) scale(0.95) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .mobile-sidebar-body {
        height: calc(100% - 70px) !important;
        overflow-y: auto !important;
        padding: 16px !important;
    }

    /* Floating Sidebar Toggle Button */
    .mobile-sidebar-toggle {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #2196F3, #1976D2) !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        cursor: pointer !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        color: white !important;
        font-size: 20px !important;
    }

    .mobile-sidebar-toggle:hover {
        transform: scale(1.1) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    }

    .mobile-sidebar-toggle:active {
        transform: scale(0.95) !important;
    }

    /* Hide toggle button when popup is open */
    .mobile-sidebar-popup.show ~ .mobile-sidebar-toggle {
        display: none !important;
    }
}



.sidebar-header {
    display: grid;
    gap:20px;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}



.theme-title {
    font-size: 18px;
    font-weight: bold;
    color: #000000 !important;
    margin: 0;
    flex-grow: 1;
}



.zodynas-content .word-title {
    font-size: 2.5em;
    font-weight: 300;
    color: #2c3e50;
    margin: 0 0 30px 0;
    text-align: center;
    letter-spacing: 1px;
}

.zodynas-word-details {
    margin-top: 24px;
    padding: 24px;
    width: 100%;
    /* background: linear-gradient(135deg, #86adf6 0%, #85adf5 100%); */
    background: rgb(235, 235, 235) !important;
    border-radius: 12px;
    display: none;
    transition: all 0.4s
cubic-bezier(0.4, 0, 0.2, 1);
   
}

.zodynas-word-details.visible {
    display: grid;
    opacity: 1;
    gap: 16px;
    width: 100%;
}

.zodynas-word-details p {
    margin: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.zodynas-word-details audio {
    margin-top: 15px;
    width: 100%;
    
}

.sentencestyle {
    display:block;
    background-color: var(--bde-links-color);
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    margin: 5px 5px;
}

.zodynas-content .reveal-button {
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #85adf5, #85adf5);
    color: #000000;
    text-transform: uppercase;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    margin-top: 20px;
    transition: all 0.3s ease;
	display: flex;
    align-items: center;
    gap: 8px;
}


.zodynas-content .reveal-button:hover {
    background: linear-gradient(135deg, #85adf5, #85adf5);
    transform: translateY(-1px);
    
}

/* Updated styles for bottom layout */
.zodynas-content .zodynas-progress-bar,
.zodynas-content .button-container {
    margin-top: auto; /* Push to bottom */
}

.zodynas-content .progress-bar-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.zodynas-content .zodynas-progress-bar {
    width: 70%; /* 70% for progress bar */
    height: 20px;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
}

.zodynas-content .zodynas-progress-bar.visible {
    visibility: visible;
}

.zodynas-content .progress-segments {
    width: 100%;
    height: 100%;
    display: flex;
    flex-grow: 1;
}

.zodynas-content .progress-segment {
    height: 100%;
    transition: width 0.3s ease;
    flex-shrink: 0;
}

.zodynas-content .progress-segment.moku {
    background-color: #4CAF50; /* Green for Moku */
}

.zodynas-content .progress-segment.nemoku {
    background-color: #f44336; /* Red for Nemoku */
}

.zodynas-content .progress-segment.unfiltered {
    background-color: #ccc; /* Grey for unfiltered */
}

.zodynas-content .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.zodynas-content .moku-button,
.zodynas-content .nemoku-button {
    padding: 12px 20px !important;
	width:100%;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 8px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-width: 44px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: white !important;
    line-height: 1.2 !important;
    position: relative !important;
    overflow: hidden !important;
}

.zodynas-content .moku-button {
    background: linear-gradient(135deg, #4CAF50, #45a049) !important;
}

.zodynas-content .moku-button:hover {
    background: linear-gradient(135deg, #45a049, #4CAF50) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.zodynas-content .nemoku-button {
    background: linear-gradient(135deg, #f44336, #d32f2f) !important;
}

.zodynas-content .nemoku-button:hover {
    background: linear-gradient(135deg, #d32f2f, #f44336) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Mobile button adjustments */
@media (max-width: 768px) {
    .zodynas-content .button-container {
        gap: 15px;
        margin-top: 20px;
    }

    .zodynas-content .moku-button,
    .zodynas-content .nemoku-button {
        padding: 12px 24px;
        font-size: 1em;
        min-width: 100px;
    }
}

.word-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.word-text {
    flex-grow: 1;
    margin-right: 10px; /* Adjust spacing as needed */
}

.button-group {
    display: flex;
    gap: 5px; /* Space between buttons */
}

.fstyles {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.word-item {
    list-style: none;
    margin-bottom: 0px;
}

/* Celebration Modal Styles */
.celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.celebration-overlay.show {
    opacity: 1;
    visibility: visible;
}

.celebration-content {
    background: white;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.7) translateY(50px);
    transition: all 0.5s ease;
}

.celebration-overlay.show .celebration-content {
    transform: scale(1) translateY(0);
}

.celebration-smile {
    font-size: 80px;
    margin-bottom: 20px;
    animation: smileBounce 2s ease-in-out infinite;
}

@keyframes smileBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.celebration-content h2 {
    color: #28a745;
    font-size: 36px;
    margin: 0 0 15px 0;
    font-weight: bold;
}

.celebration-content p {
    color: #495057;
    font-size: 18px;
    margin: 0 0 30px 0;
    line-height: 1.5;
}

.celebration-close {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.celebration-close:hover {
    background: linear-gradient(135deg, #218838, #1aa085);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Enhanced Inline Celebration Content with Options */
.celebration-in-content {
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    padding: 40px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.celebration-in-content.show {
    opacity: 1;
    transform: translateY(0);
}

.celebration-in-content .celebration-smile {
    font-size: 100px;
    margin-bottom: 30px;
    animation: smileBounce 2s ease-in-out infinite;
    display: block;
}

.celebration-in-content h2 {
    color: #28a745;
    font-size: 48px;
    margin: 0 0 20px 0;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.celebration-in-content p {
    color: #495057;
    font-size: 24px;
    margin: 0 0 20px 0;
    line-height: 1.4;
    font-weight: 500;
    max-width: 500px;
}

/* Celebration Options Buttons */
.celebration-options {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
    max-width: 500px;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
}

.celebration-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 25px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    height: 56px;
    text-decoration: none;
    color: white;
    line-height: 1.2;
}

/* Specific styling for retry nemoku button - grey background with white text */
.retry-nemoku-button.celebration-btn {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white !important;
}

.retry-nemoku-button.celebration-btn:hover {
    background: linear-gradient(135deg, #5a6268, #6c757d);
}

.celebration-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.celebration-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.reset-button.celebration-btn {
    color: #ffffff;
    background-color: #e8e8e8;
    border: 0px;
    border-radius: 20px;
    padding: 7px 25px;
    font-size: 16px;
    font-weight: 600;
}

.reset-button.celebration-btn:hover {
    background-color: #d0d0d0;
}

.back-button.celebration-btn {
    background: linear-gradient(135deg, #c20000, #950000);
}

.back-button.celebration-btn:hover {
    background: linear-gradient(135deg, #1976D2, #2196F3);
}

.btn-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
}

/* Mobile responsive celebration buttons */
@media (max-width: 768px) {
    .celebration-options {
        flex-flow: wrap;
        gap: 20px;
        width: 100%;
        max-width: 500px;
        margin-top: 30px;
        justify-content: center;
        align-items: baseline;
    }

    .celebration-btn {
        padding: 12px 20px;
        font-size: 14px;
        min-width: 150px;
    }

    .btn-icon {
        font-size: 16px;
        min-width: 18px;
    }
}

.celebration-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.celebration-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.celebration-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.play-again-btn {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
}

.play-again-btn:hover {
    background: linear-gradient(135deg, #45a049, #4CAF50);
}

.manage-list-btn {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
}

.manage-list-btn:hover {
    background: linear-gradient(135deg, #1976D2, #2196F3);
}

.back-to-list-btn {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
}

.back-to-list-btn:hover {
    background: linear-gradient(135deg, #5a6268, #6c757d);
}

.btn-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* List Management Interface */
.list-management {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.list-management h2 {
    color: #2c3e50;
    font-size: 32px;
    margin-bottom: 15px;
    font-weight: 700;
}

.list-management > p {
    color: #6c757d;
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Management Instructions */
.management-instructions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e9ecef;
}

.instruction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 16px;
    color: #495057;
}

.instruction-icon {
    font-size: 20px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Management Actions */
.management-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.management-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.management-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.management-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.start-with-nemoku {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    color: white;
}

.start-with-nemoku:hover {
    background: linear-gradient(135deg, #F57C00, #FF9800);
}

.start-with-all {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
    color: white;
}

.start-with-all:hover {
    background: linear-gradient(135deg, #7B1FA2, #9C27B0);
}

.back-to-celebration {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
}

.back-to-celebration:hover {
    background: linear-gradient(135deg, #5a6268, #6c757d);
}

.retry-nemoku-button {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white !important;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.reset-button {
    color: #fff;
    background-color: #075fb7 !important;
    border: 0px;
    padding: 10px !important;
    border-radius: 20px;
    padding: 7px 25px;
    font-size: 14px;
    font-weight: 300;
    width:100%;
    margin-top:8px;
}

/* Filter Section Animations */
.filter-section {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.filter-section.fading-out {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.filter-section.fading-inf.moku-list, .nemoku-list {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Accordion Styles for Filter Sections */
@media (max-width: 768px) {
    .filter-section {
        gap: 0 !important;
    }

    /* Accordion Header Styles */
    .moku-filter h4,
    .nemoku-filter h4 {
        cursor: pointer !important;
        user-select: none;
        padding: 10px 10px !important;
        margin: 8px 0 0 0 !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        position: relative !important;
    }

    .moku-filter h4:hover,
    .nemoku-filter h4:hover {
        background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Accordion Icon */
    .moku-filter h4::after,
    .nemoku-filter h4::after {
        content: '▼';
        font-size: 14px;
        transition: transform 0.3s ease;
        color: #6c757d;
    }

    .moku-filter h4.collapsed::after,
    .nemoku-filter h4.collapsed::after {
        transform: rotate(-90deg);
    }

    /* Accordion Content */
    .moku-list,
    .nemoku-list {
        transition: all 0.3s ease;
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 8px 8px;
        background: white;
        overflow: hidden;
    }

    .moku-list.collapsed,
    .nemoku-list.collapsed {
        display: none !important;
    }

    .moku-list:not(.collapsed),
    .nemoku-list:not(.collapsed) {
        display: block !important;
        max-height: 200px;
        overflow-y: auto;
    }

    /* Ensure word items are visible when expanded */
    .moku-list:not(.collapsed) .word-item,
    .nemoku-list:not(.collapsed) .word-item {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gentle Word Transfer Animations - 1 second with slight bounce effect */
.word-item {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.word-item.slide-out-left {
    animation: slideOutLeftGentle 1s ease-in-out forwards;
}

.word-item.slide-out-right {
    animation: slideOutRightGentle 1s ease-in-out forwards;
}

.word-item.slide-in-from-right {
    animation: slideInFromRightGentle 1s ease-in-out forwards;
}

.word-item.slide-in-from-left {
    animation: slideInFromLeftGentle 1s ease-in-out forwards;
}

@keyframes slideOutLeftGentle {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-30px) scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: translateX(-120px) scale(0.95);
        opacity: 0;
    }
}

@keyframes slideOutRightGentle {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(30px) scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: translateX(120px) scale(0.95);
        opacity: 0;
    }
}

@keyframes slideInFromRightGentle {
    0% {
        transform: translateX(120px) scale(0.95);
        opacity: 0;
    }
    50% {
        transform: translateX(30px) scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideInFromLeftGentle {
    0% {
        transform: translateX(-120px) scale(0.95);
        opacity: 0;
    }
    50% {
        transform: translateX(-30px) scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Zodynas Grid Layout - Responsive Grid System */
.zodynas-grid
 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0;
    margin: 0 auto;
    padding: 0;
}

/* Desktop: Maximum 3 columns */
@media (min-width: 1024px) {
    .zodynas-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

/* Tablet: 2 columns */
@media (max-width: 1023px) and (min-width: 768px) {
    .zodynas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .zodynas-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }
    .word-list,.moku-list,.nemoku-list
 {
    padding-inline-start: 0 !important;
    list-style: none;
    margin: 0;
    height: 120px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.word-item {
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0px 10px !important;
    cursor: pointer;
    justify-content: space-between;
}
}

.zodynas .breakdance .bde-div {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: left;
    max-width: 100%;
    position: relative;
    background-size: cover;
}
/* Grid Item Styling */
.zodynas-grid article {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e9ecef;
}

.zodynas-grid article:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Ensure consistent item heights */
.zodynas-grid .bde-div-58-104-64-58-1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

/* Image container */
.zodynas-grid .bde-image2-58-100-64-58-1 {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Placeholder image styling */
.zodynas-grid .zodynas-no-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #6c757d;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
}

/* Content area */
.zodynas-grid .bde-heading-58-101-64-58-1 {
    padding: 20px 20px 10px 20px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
}

.zodynas-grid .bde-text-58-102-64-58-1 {
    padding: 0 20px 15px 20px;
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    flex-grow: 1;
}

/* Button area */
.zodynas-grid .bde-button-58-103-64-58-1 {
    padding: 15px 20px 20px 20px;
    margin-top: auto;
}

/* Custom Breakdance Styles Override */
.breakdance .bde-div-58-104 {
    padding: 40px 40px 40px 40px;
    border-radius: 20px;
}

/* Center all content inside Zodynas grid items */
.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 .bde-image2-58-100-64-58-1,
.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 .bde-image2-58-100,
.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 .zodynas-no-image {
    margin: 0 auto 20px auto;
}

.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 .bde-heading-58-101-64-58-1,
.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 .bde-heading-58-101 {
    text-align: center;
    margin-bottom: 15px;
}

.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 .bde-text-58-102-64-58-1,
.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 .bde-text-58-102 {
    text-align: center;
    margin-bottom: 20px;
}

.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 .bde-button-58-103-64-58-1,
.zodynas-grid .bde-div-58-104-64-58-1.bde-div.bde-div-58-104 .bde-button-58-103 {
    text-align: center;
    margin-top: auto;
}

.breakdance .bde-image2-58-100 {
    border-radius: 10px;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.breakdance .bde-heading-58-101 {
    color: var(--bde-palette-color-1-1f4d8bf3-7fca-4f0a-9ed5-00a2d3c1e5ce);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2em;
}

.breakdance .bde-preset-d8ae0450-2f6e-41a7-94f6-13bca2f1028d .bde-button__button {
    --bde-button-custom-border-color: transparent;
    --bde-button-custom-border-color-hover: transparent;
    --bde-button-custom-text-color: var(--bde-headings-color);
    --bde-button-custom-text-color-hover: var(--bde-headings-color);
    --bde-button-custom-background-color: #BA0C2F;
    --bde-button-custom-background-color-hover: var(--bde-brand-primary-color);
    border-radius: 9999px;
    color: var(--bde-headings-color);
    font-weight: 700;
    padding-top: 15px;
    padding-right: 40px;
    padding-bottom: 15px;
    padding-left: 40px;
}

/* Safe Cart Icon for Zodynas Buy Buttons - Multiple Selectors for Compatibility */
.zodynas-buy-button::before,
.zodynas-grid .zodynas-buy-button::before,
.bde-woo-product-footer .zodynas-buy-button::before,
.button.zodynas-buy-button::before,
a.zodynas-buy-button::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='7' cy='22' r='2'/%3e%3ccircle cx='17' cy='22' r='2'/%3e%3cpath d='M23.685 1.336a1 1 0 0 0-1.414 0L17.112 6.5l-1.551-1.619a1 1 0 0 0-1.442 1.386l1.614 1.679a1.872 1.872 0 0 0 1.345.6h.033a1.873 1.873 0 0 0 1.335-.553L23.685 2.75a1 1 0 0 0 0-1.414z'/%3e%3cpath d='M21.9 9.016a1 1 0 0 0-1.162.807l-.128.709A3 3 0 0 1 17.657 13H5.418l-.94-8H11a1 1 0 0 0 0-2H4.242L4.2 2.648A3 3 0 0 0 1.222 0H1a1 1 0 0 0 0 2h.222a1 1 0 0 1 .993.883l1.376 11.7A5 5 0 0 0 8.557 19H19a1 1 0 0 0 0-2H8.557a3 3 0 0 1-2.829-2H17.657a5 5 0 0 0 4.921-4.113l.128-.71a1 1 0 0 0-1.906-.071z'/%3e%3c/svg%3e");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='7' cy='22' r='2'/%3e%3ccircle cx='17' cy='22' r='2'/%3e%3cpath d='M23.685 1.336a1 1 0 0 0-1.414 0L17.112 6.5l-1.551-1.619a1 1 0 0 0-1.442 1.386l1.614 1.679a1.872 1.872 0 0 0 1.345.6h.033a1.873 1.873 0 0 0 1.335-.553L23.685 2.75a1 1 0 0 0 0-1.414z'/%3e%3cpath d='M21.9 9.016a1 1 0 0 0-1.162.807l-.128.709A3 3 0 0 1 17.657 13H5.418l-.94-8H11a1 1 0 0 0 0-2H4.242L4.2 2.648A3 3 0 0 0 1.222 0H1a1 1 0 0 0 0 2h.222a1 1 0 0 1 .993.883l1.376 11.7A5 5 0 0 0 8.557 19H19a1 1 0 0 0 0-2H8.557a3 3 0 0 1-2.829-2H17.657a5 5 0 0 0 4.921-4.113l.128-.71a1 1 0 0 0-1.906-.071z'/%3e%3c/svg%3e");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Fallback for browsers that don't support mask-image */
@supports not (mask-image: url("data:image/svg+xml,%3csvg")) {
    .zodynas-buy-button::before,
    .zodynas-grid .zodynas-buy-button::before,
    .bde-woo-product-footer .zodynas-buy-button::before,
    .button.zodynas-buy-button::before,
    a.zodynas-buy-button::before {
        content: "🛒";
        font-size: 16px;
        margin-right: 6px;
        vertical-align: middle;
    }
}

/* WooCommerce Button Styles - Match Breakdance WooCommerce styling */
.zodynas-grid .bde-woo-product-footer a.button.product_type_simple::after,
.zodynas-grid .bde-woo-product-footer a.button.add_to_cart_button::after {
    content: "";
    display: block;
    background-color: currentColor;
    width: 22px;
    height: 22px;
    margin-right: 4px;
    margin-left: 4px;
    mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22Outline%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2222%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2222%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M23.685%2C1.336a1%2C1%2C0%2C0%2C0-1.414%2C0L17.112%2C6.5%2C15.561%2C4.881a1%2C1%2C0%2C0%2C0-1.442%2C1.386l1.614%2C1.679a1.872%2C1.872%2C0%2C0%2C0%2C1.345.6h.033a1.873%2C1.873%2C0%2C0%2C0%2C1.335-.553L23.685%2C2.75A1%2C1%2C0%2C0%2C0%2C23.685%2C1.336Z%22%2F%3E%3Cpath%20d%3D%22M21.9%2C9.016a1%2C1%2C0%2C0%2C0-1.162.807l-.128.709A3%2C3%2C0%2C0%2C1%2C17.657%2C13H5.418l-.94-8H11a1%2C1%2C0%2C0%2C0%2C0-2H4.242L4.2%2C2.648A3%2C3%2C0%2C0%2C0%2C1.222%2C0H1A1%2C1%2C0%2C0%2C0%2C1%2C2h.222a1%2C1%2C0%2C0%2C1%2C.993.883l1.376%2C11.7A5%2C5%2C0%2C0%2C0%2C8.557%2C19H19a1%2C1%2C0%2C0%2C0%2C0-2H8.557a3%2C3%2C0%2C0%2C1-2.829-2H17.657a5%2C5%2C0%2C0%2C0%2C4.921-4.113l.128-.71A1%2C1%2C0%2C0%2C0%2C21.9%2C9.016Z%22%2F%3E%3C%2Fsvg%3E);
    mask-position: 0 0;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22Outline%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2222%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2222%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M23.685%2C1.336a1%2C1%2C0%2C0%2C0-1.414%2C0L17.112%2C6.5%2C15.561%2C4.881a1%2C1%2C0%2C0%2C0-1.442%2C1.386l1.614%2C1.679a1.872%2C1.872%2C0%2C0%2C0%2C1.345.6h.033a1.873%2C1.873%2C0%2C0%2C0%2C1.335-.553L23.685%2C2.75A1%2C1%2C0%2C0%2C0%2C23.685%2C1.336Z%22%2F%3E%3Cpath%20d%3D%22M21.9%2C9.016a1%2C1%2C0%2C0%2C0-1.162.807l-.128.709A3%2C3%2C0%2C0%2C1%2C17.657%2C13H5.418l-.94-8H11a1%2C1%2C0%2C0%2C0%2C0-2H4.242L4.2%2C2.648A3%2C3%2C0%2C0%2C0%2C1.222%2C0H1A1%2C1%2C0%2C0%2C0%2C1%2C2h.222a1%2C1%2C0%2C0%2C1%2C.993.883l1.376%2C11.7A5%2C5%2C0%2C0%2C0%2C8.557%2C19H19a1%2C1%2C0%2C0%2C0%2C0-2H8.557a3%2C3%2C0%2C0%2C1-2.829-2H17.657a5%2C5%2C0%2C0%2C0%2C4.921-4.113l.128-.71A1%2C1%2C0%2C0%2C0%2C21.9%2C9.016Z%22%2F%3E%3C%2Fsvg%3E);
    -webkit-mask-position: 0 0;
    -webkit-mask-size: 100% 100%;
    transition-timing-function: ease-in-out;
    transition-property: transform, background-color;
    transition-duration: var(--bde-transition-duration);
}

.zodynas-grid .bde-woo-product-footer a.button.product_type_simple,
.zodynas-grid .bde-woo-product-footer a.button.add_to_cart_button {
    --bde-button-secondary-border-color: transparent;
    --bde-button-secondary-border-color-hover: transparent;
    --bde-button-secondary-text-color: #fff;
    --bde-button-secondary-text-color-hover: #fff;
    --bde-button-secondary-background-color: var(--bde-palette-ba0c2f-e57bebbc-8d9d-476d-9b1e-b63f7f8bbed7-2);
    --bde-button-secondary-background-color-hover: var(--bde-brand-primary-color);
    border-radius: 9999px;
    font-size: 18px;
}

/* Enhanced filter section visibility */
.main-section {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-section.empty {
    opacity: 0.5;
    transform: scale(0.98);
}

.main-section:not(.empty) {
    opacity: 1;
    transform: scale(1);
}

/* New content layout structure */
.zodynas-content {
    width:70%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px;
    gap: 40px;
}

.content-left {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 400px;
}

.content-right {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 400px;
}

.word-section {
    width: 100%;
    text-align: left;
    margin-bottom: 0px;
}
.desktop-word-section{min-width:100%;}
.word-header {
    display: grid;
    gap:20px;
    align-items: center;
    justify-content: left;
    min-width: 100%;
    margin-bottom: 10px;
}

.word-title-right {
    font-size: 20px;
    line-height: 1.4em;
    font-weight: 600;
    color: #000000 !important;
    margin: 0;
    text-align: left;
    flex: 0;
}

.step-counter {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 20px;
    border: 2px solid #e0e0e0;
    box-shadow: none;
    max-width: 100px;
    width: 100px;
    text-align: center;
    margin-left: 10px;
}

.reveal-section {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 40px;
}

.button-section {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: auto;
    padding-top: 40px;
    flex-wrap: wrap;
}

.button-icon {
    margin-right: 8px;
    font-size: 16px;
    font-weight: bold;
}

.moku-button,
.nemoku-button {
    font-size: 14px !important;
    padding: 10px 20px !important;
    min-width: 100px !important;
}

.details-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Word list styling - remove default padding */
.word-list {
    padding-inline-start: 0 !important;
    list-style: none;
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 225px;
}

/* Moku and Nemoku list styling */
.moku-list,
.nemoku-list {
    padding-left: 0;
    padding-top:5px;
    list-style: none;
    margin: 0;
        background-color: white;
    border-radius: 0px 0px 20px 20px;
        overflow-y: scroll;
        overflow-x: hidden;
    max-height: 225px;
}

.moku-list .word-item,
.nemoku-list .word-item {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.moku-list .word-item:hover,
.nemoku-list .word-item:hover {
    background-color: #f8f9fa;
}

/* Active word highlighting */
.word-item.active-word {
    background: #fff3b3;
    color: black !important;
    border-left: 0px solid #2196f3 !important;
    border-radius: 0px !important;
    box-shadow: none;
    transform: translateX(0px) !important;
    font-weight: bold !important;
    position: relative !important;
}

.word-item.active-word::before {
    content: '🎯';
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-50%) scale(1.2);
        opacity: 1;
    }
}

.word-item.active-word span {
    color: #1565c0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Content loading state */
.zodynas-content.content-loading .moku-button,
.zodynas-content.content-loading .nemoku-button {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.zodynas-content.content-loading {
    position: relative;
}

.zodynas-content.content-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
    pointer-events: none;
}
 
    /* Mobile adjustments for new layout */
@media (max-width: 768px) {
    .zodynas-content {
        display: block !important; /* Ensure flex display on mobile */
        flex-direction: column;
		text-align: -webkit-center;
        gap: 20px;
        padding: 20px;
    }
	.zodynas-content .moku-button, .zodynas-content .nemoku-button {
    padding: 15px 20px !important;
    width: 50%;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 8px !important;
    transition: all 0.2s 
cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-width: 44px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    color: white !important;
    line-height: 1.2 !important;
    position: relative !important;
    overflow: hidden !important;
}

.content-left, .content-right {
        flex: auto;
        display: flex;
        width: 100%;
        min-width: 100% !important;
        min-height: 10px;
        flex-flow: wrap;
    }

    .word-section {
        text-align: center;
    }

    .word-header {
        display:flow;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        justify-items: center;
    }

    .word-title-right {
        text-align: center;
        font-size: 2.5em;
        margin: 0;
    }

    .step-counter {
        margin-left: 0;
        margin-top: 10px;
        margin-bottom:10px;
        order: 2;
        width:200px;
    }

    .reveal-section {
        justify-content: center;
    }

    /* HIDE DESKTOP ELEMENTS ON MOBILE */
    .reveal-section.desktop-reveal {
        display: none !important; /* Hide desktop reveal button on mobile */
    }

    .desktop-word-section {
        display: none !important; /* Hide desktop word section on mobile */
    }

    /* SHOW MOBILE ELEMENTS ON MOBILE */
    .mobile-word-toggle {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .mobile-reveal-section {
        order: -1; /* Put mobile reveal at top */
        margin-bottom: 15px;
		        min-width: 100% !important;
    }

    .mobile-step-counter {
        margin-bottom: 20px;
        justify-items:center;
    }

    .mobile-content-area {
        width: 100%;
        min-height: 200px;
        text-align: center;
    }

    .zodynas-word-details-mobile {
        padding: 20px 10px;
        display: grid;
        gap: 0px;
        background: rgb(235, 235, 235) !important;
        border-radius: 12px;
        margin-top: 10px;
    }

    .zodynas-word-details-mobile p {
        margin: 0;
        color: #000;
        font-size: 18px;
        line-height: 1.6;
        font-weight: 500;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .mobile-content-visible {
        display: block !important;
    }

    .mobile-content-hidden {
        display: none !important;
    }
    audio
    {
        width:100%;
    }
}

/* HIDE MOBILE ELEMENTS ON DESKTOP */
@media (min-width: 769px) {
    .mobile-word-toggle {
        display: none !important; /* Hide mobile sections on desktop */
    }

    .mobile-reveal-section,
    .mobile-step-counter,
    .mobile-content-area {
        display: none !important;
    }


    .button-section {
        justify-content: center;
        padding-top: 20px;
    }

    .details-section {
        align-items: center;
    }
}

/* Card Fly Animations - Desktop and Mobile */
.card-fly-left {
    animation: cardFlyLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: center;
}

.card-fly-right {
    animation: cardFlyRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: center;
}

.card-enter-from-right {
    animation: cardEnterFromRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: center;
}

.card-enter-from-left {
    animation: cardEnterFromLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: center;
}

/* Desktop Card Animations */
@keyframes cardFlyLeft {
    0% {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-150%) rotateY(-15deg);
        opacity: 0;
    }
}

@keyframes cardFlyRight {
    0% {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(150%) rotateY(15deg);
        opacity: 0;
    }
}

@keyframes cardEnterFromRight {
    0% {
        transform: translateX(150%) rotateY(15deg) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes cardEnterFromLeft {
    0% {
        transform: translateX(-150%) rotateY(-15deg) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

/* Mobile Card Animations - Simpler for performance */
@media (max-width: 768px) {
    @keyframes cardFlyLeft {
        0% {
            transform: translateX(0);
            opacity: 1;
        }
        100% {
            transform: translateX(-120vw);
            opacity: 0;
        }
    }

    @keyframes cardFlyRight {
        0% {
            transform: translateX(0);
            opacity: 1;
        }
        100% {
            transform: translateX(120vw);
            opacity: 0;
        }
    }

    @keyframes cardEnterFromRight {
        0% {
            transform: translateX(120vw) scale(0.9);
            opacity: 0;
        }
        100% {
            transform: translateX(0) scale(1);
            opacity: 1;
        }
    }

    @keyframes cardEnterFromLeft {
        0% {
            transform: translateX(-120vw) scale(0.9);
            opacity: 0;
        }
        100% {
            transform: translateX(0) scale(1);
            opacity: 1;
        }
    }

    /* Simple button feedback */
    .zodynas-content .moku-button:active,
    .zodynas-content .nemoku-button:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* Simple loading state */
    .zodynas-content .moku-button.processing,
    .zodynas-content .nemoku-button.processing {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .button-section {
        justify-content: center;
        padding-top: 20px;
    }

    .details-section {
        align-items: center;
    }
}