/* Category Badge Fixes for Better Readability */

/* Homepage category badges */
.poem-card .poem-category,
.poems-section .poem-card .poem-category {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: white !important;
    padding: 0.4rem 0.9rem !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    z-index: 2 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* Poems page category badges */
body.poems-page .poem-card .poem-category,
body.poems-page .poem-category {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: white !important;
    padding: 0.4rem 0.9rem !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    z-index: 2 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* Hover effects for category badges */
.poem-card:hover .poem-category {
    background: rgba(139, 69, 19, 0.9) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Read more button size fixes for all pages */
.poem-actions {
    text-align: center !important;
    padding: 0.5rem 1rem !important;
    margin-top: auto !important;
}

.read-more-btn {
    max-width: calc(100% - 1rem) !important;
    width: auto !important;
    min-width: 100px !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .poem-card .poem-category,
    body.poems-page .poem-card .poem-category {
        top: 0.5rem !important;
        right: 0.5rem !important;
        padding: 0.3rem 0.7rem !important;
        font-size: 0.7rem !important;
    }
    
    .read-more-btn {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
        min-width: 80px !important;
    }
}

/* Ensure poem cards have proper layout for button fitting */
.poem-card {
    display: flex !important;
    flex-direction: column !important;
}

.poem-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 1rem !important;
}

.poem-actions {
    margin-top: auto !important;
}

/* Poem Reader State Management - Simple and Direct */
.loading-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 300px !important;
    width: 100% !important;
    text-align: center !important;
    padding: 2rem !important;
}

.error-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 300px !important;
    width: 100% !important;
    text-align: center !important;
    padding: 2rem !important;
    color: #8b4513 !important;
}

/* Default states - controlled by JavaScript */
#loadingState {
    display: flex !important;
}

#errorState {
    display: none !important;
}

#poemMainContent {
    display: none !important;
}

#poemSidebar {
    display: none !important;
}

/* Poem Text Formatting - Preserve Original Line Breaks */
.poem-text {
    white-space: pre-line !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-family: 'Noto Serif Devanagari', serif !important;
    font-size: 1.3rem !important;
    line-height: 1.8 !important;
    color: #5d4037 !important;
    text-align: left !important;
    padding: 2rem !important;
    background: rgba(245, 245, 220, 0.3) !important;
    border-radius: 15px !important;
    border-left: 4px solid #d2b48c !important;
    margin: 1rem 0 !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-feature-settings: "kern" 1 !important;
    font-feature-settings: "kern" 1 !important;
}

/* Ensure poem content preserves formatting in all contexts */
.poem-content-box .poem-text,
#poemMainContent .poem-text,
.poem-reader .poem-text {
    white-space: pre-line !important;
    font-family: 'Noto Serif Devanagari', serif !important;
    word-break: normal !important;
    hyphens: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Override any conflicting text formatting */
.poem-box .poem-text *,
.poem-text * {
    white-space: inherit !important;
}

/* Specific overrides for poem reader page */
body .poem-reader .poem-text {
    white-space: pre-line !important;
    display: block !important;
    unicode-bidi: normal !important;
}

/* Make sure no global styles interfere */
* .poem-text,
html .poem-text,
body .poem-text {
    white-space: pre-line !important;
}