/* Flashcard Deck Styles */

/* Deck action buttons styling */
.deck-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* main.css.backup had 20px or 30px, current is 30px */
    flex-wrap: wrap;
    gap: 15px;
}

.deck-main-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* main.css.backup had 10px, current is 15px */
    flex-wrap: wrap;
}

/* Flashcard Grid Container */
.flashcards-deck-grid-container {
    max-width: 1100px; /* Wider than medium-container */
    margin: 30px auto; /* Vertical spacing and horizontal centering */
    padding: 0 20px;   /* Horizontal padding */
}

.flashcards-deck-grid-container h2 {
    text-align: center;
    margin-bottom: 30px; /* Space below heading */
    font-size: 2rem; /* Consistent with other section titles */
    color: var(--medium-dark-blue);
}

/* Card List Grid */
.cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 20px; /* main.css.backup might have 25px or 30px, current is 25px */
    padding: 0;
    list-style: none;
}

/* Individual Vocabulary Card */
.vocabulary-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    transition: all 0.3s ease;
    display: flex; 
    flex-direction: column;
    position: relative; 
}

.vocabulary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.vocabulary-card .vocabulary-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.vocabulary-card .vocabulary-header h2 {
    font-size: 1.8rem;
    color: var(--medium-blue);
    margin-top: 0;
    margin-bottom: 5px;
}

.vocabulary-card .pronunciation {
    font-size: 1rem;
    color: var(--medium-gray);
    font-family: var(--font-sans);
}

.vocabulary-card .vocabulary-body {
    flex-grow: 1; 
}

.vocabulary-card .vocabulary-body p {
    font-size: 1rem;
    line-height: 1.8; 
    margin-bottom: 15px; 
}

.vocabulary-card .vocabulary-body p strong {
    color: var(--medium-dark-gray);
    display: block; 
    margin-bottom: 5px; 
}

.vocabulary-card .flashcard-chinese {
    font-size: 1.15rem; 
    color: var(--medium-black);
    margin-bottom: 15px;
    line-height: 1.65; 
}

.vocabulary-card .example-translation-text {
    font-size: 0.9rem;
    color: var(--medium-gray);
}

.vocabulary-card .card-actions {
    margin-top: auto; 
    padding-top: 15px;
    border-top: 1px solid #f0f0f0; 
    text-align: right; 
}

.vocabulary-card .card-actions .btn {
    padding: 6px 12px;
    font-size: 0.9rem;
}

/* Blurred cards and locked overlay */
.vocabulary-card.blurred {
    filter: blur(5px); /* Or 4px from main.css.backup */
    pointer-events: none;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8); /* main.css.backup had 0.8, current 0.7 */
    display: flex;
    flex-direction: column; /* main.css.backup often centers content this way */
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 12px; /* Match card */
    z-index: 10;
    padding: 20px; /* Added for spacing */
}

.locked-overlay p {
    font-size: 1.1rem; /* main.css.backup had 1.1rem, current 1.2rem */
    font-weight: bold; /* Or 600 from main.css.backup */
    color: var(--medium-blue);
    background: rgba(255, 255, 255, 0.95); /* Lighter background for text from main.css.backup */
    padding: 15px 20px; /* More padding from main.css.backup */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 0; /* Reset margin */
}

.locked-overlay i { /* Assuming an icon is used with the text, e.g., lock icon */
    font-size: 1.5rem; /* From main.css.backup */
    margin-bottom: 10px; /* Space between icon and text, from main.css.backup */
}

/* Empty deck message */
.empty-deck-message {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    padding: 50px 20px; /* More padding from main.css.backup */
    background-color: #f9f9f9; /* Or var(--light-background) */
    border-radius: 8px;
    color: var(--medium-gray);
}

.empty-deck-message p {
    font-size: 1.1rem; /* main.css.backup had 1.1rem, current 1.2rem */
    margin-bottom: 15px; /* More margin from main.css.backup */
}

.empty-deck-message i {
    font-size: 2.5rem; /* Larger icon from main.css.backup */
    margin-bottom: 20px;
    display: block;
    color: var(--medium-light-gray);
}

/* Preview Notice Styles */
.preview-notice {
    background-color: #fffbea; 
    border: 1px solid #fceec4; 
    border-radius: 6px;
    padding: 15px;
    margin-top: 20px; 
    margin-bottom: 20px; 
}

.preview-notice p {
    display: flex;
    align-items: center; 
    margin: 0; 
    gap: 12px; 
}

.preview-notice p .fas.fa-lightbulb {
    color: #f59e0b; 
    font-size: 1.3rem; 
    flex-shrink: 0;
}

/* Styles for the deck grid on the main flashcards page */
.deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive columns */
    gap: 25px; /* Spacing between cards */
    padding: 20px 0; /* Padding around the grid */
}

.deck-card {
    background-color: #ffffff;
    border: 1px solid #e9ecef; /* Adjusted to match platform-card from main_backup.css */
    border-radius: 12px; /* Rounded corners */
    padding: 20px; /* Kept as 20px, fits image */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16); /* Adjusted to match platform-card */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adjusted to match platform-card */
}

.deck-card:hover {
    transform: translateY(-8px); /* Adjusted to match platform-card */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24); /* Adjusted to match platform-card */
}

.deck-card h3 {
    font-size: 1.4rem; /* Deck title size */
    color: var(--dark-blue); /* Dark blue for title */
    margin-top: 0;
    margin-bottom: 10px;
    display: flex; /* To align badge and text if needed */
    align-items: center;
}

.deck-card .badge.standard-deck-indicator {
    background-color: var(--medium-green); /* Changed from var(--teal) to var(--medium-green) from main_backup.css */
    color: white;
    padding: 5px 12px;
    border-radius: 16px; /* Pill shape */
    font-size: 0.9rem;
    font-weight: 600;
    margin-right: 8px; /* Space if title text follows */
    display: inline-block; /* Ensure it behaves like a block for padding */
}

.deck-card p {
    font-size: 0.95rem;
    color: var(--medium-dark-gray); /* Medium gray for description */
    line-height: 1.6;
    flex-grow: 1; /* Allow description to take available space */
    margin-bottom: 15px;
}

.deck-card .card-count {
    font-size: 0.85rem;
    color: var(--medium-gray); /* Lighter gray for card count */
    margin-bottom: 20px;
}

.deck-actions {
    display: flex;
    justify-content: flex-start; /* Align buttons to the start */
    align-items: center;
    gap: 10px; /* Space between buttons */
    margin-top: auto; /* Push actions to the bottom of the card */
    padding-top: 15px;
    border-top: 1px solid #f0f0f0; /* Separator line */
}

.deck-actions .btn {
    padding: 8px 15px;
    font-size: 0.9rem;
}

.deck-actions .btn i {
    margin-right: 6px;
}

/* Specific styling for custom deck titles if they don't have a badge */
.deck-card.custom-deck h3 {
    color: var(--dark-purple); /* Example: different color for custom deck titles */
}

/* Enhanced Floating Action Button */
.fab-toggle-standard-decks {
    position: fixed;
    bottom: 85px; /* Above back-to-top button */
    right: 20px;
    background: linear-gradient(135deg, var(--medium-green) 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 28px;
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    backdrop-filter: blur(10px);
    min-height: 48px; /* Touch target minimum */
    min-width: 48px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.fab-toggle-standard-decks:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
    transform: translateY(-2px);
}

.fab-toggle-standard-decks:active {
    transform: translateY(0px) scale(0.95);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.fab-toggle-standard-decks i {
    font-size: 1.1rem;
    /* The transition: transform 0.3s ease; can be kept if you anticipate other transforms,
       but it's not strictly necessary for the eye/eye-slash change. */
}

/* This rule might not be triggered by the current JS for toggleStandardDecksBtn
   as it doesn't add an .active class to the button for this specific icon change.
   The icon class is changed directly (fa-eye to fa-eye-slash).
   Consider removing if not used, or if the JS is not intended to add .active here.
   An icon rotation is not typical for an eye/eye-slash toggle. */
.fab-toggle-standard-decks.active i {
    /* transform: rotate(180deg); */ /* Commented out or remove if not needed */
}

/* Text visibility control */
.fab-toggle-standard-decks .btn-text-short {
    display: none;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .fab-toggle-standard-decks {
        bottom: 75px;
        right: 16px;
        padding: 10px 14px;
        font-size: 0.9rem;
        border-radius: 24px;
        gap: 6px;
    }
    
    /* Hide full text, show short version */
    .fab-toggle-standard-decks .btn-text {
        display: none;
    }
    
    .fab-toggle-standard-decks .btn-text-short {
        display: inline;
    }
}

@media (max-width: 480px) {
    .fab-toggle-standard-decks {
        bottom: 70px;
        right: 12px;
        padding: 8px 12px;
        font-size: 0.85rem;
        border-radius: 20px;
        gap: 4px;
    }
    
    /* Very small screens - icon only */
    .fab-toggle-standard-decks .btn-text,
    .fab-toggle-standard-decks .btn-text-short {
        display: none;
    }
    
    .fab-toggle-standard-decks {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    
    .fab-toggle-standard-decks i {
        font-size: 1.2rem;
    }
}

/* Touch feedback and accessibility */
.fab-toggle-standard-decks:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.fab-toggle-standard-decks:focus:not(:focus-visible) {
    outline: none;
}

/* Tooltip for mobile */
.fab-toggle-standard-decks::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1001;
}

.fab-toggle-standard-decks::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 8px);
    right: 16px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

/* Show tooltip on long press (mobile) or hover (desktop) */
@media (hover: hover) {
    .fab-toggle-standard-decks:hover::after,
    .fab-toggle-standard-decks:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* Enhanced back-to-top button positioning */
.back-to-top-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #1687ff, #0057b3be);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.4rem;
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
}

.back-to-top-button.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-button:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
    transform: translateY(-2px);
}

.back-to-top-button:active {
    transform: translateY(0) scale(0.95);
}

/* Mobile adjustments for back-to-top */
@media (max-width: 768px) {
    .back-to-top-button {
        right: 16px;
        width: 46px;
        height: 46px;
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .back-to-top-button {
        right: 12px;
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        bottom: 16px;
    }
}

/* Prevent buttons from overlapping on very small screens */
@media (max-width: 360px) {
    .fab-toggle-standard-decks {
        bottom: 65px;
        right: 8px;
    }
    
    .back-to-top-button {
        right: 8px;
        bottom: 12px;
    }
}

/* Enhanced deck grid responsiveness */
@media (max-width: 768px) {
    .deck-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        padding: 15px 0;
    }
    
    .deck-card {
        padding: 16px;
    }
    
    .deck-actions {
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .deck-actions .btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .deck-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px 0;
    }
    
    .deck-card {
        padding: 14px;
    }
    
    .deck-card h3 {
        font-size: 1.2rem;
    }
    
    .deck-actions {
        gap: 6px;
    }
    
    .deck-actions .btn {
        padding: 8px 10px;
        font-size: 0.8rem;
        flex: 1;
        min-width: 0;
    }
    
    .deck-actions .btn i {
        margin-right: 4px;
    }
}

/* Add this rule to hide standard decks when the .hidden class is applied by JavaScript */
.deck-card.standard-deck.hidden {
    display: none !important; /* Use !important to ensure it overrides other display properties */
}