/**\n * PHASE 2: Enhanced Favorites CSS - Cross-page Synchronization & Mobile\n * Improvements for button states, animations, and mobile responsiveness\n */\n\n/* Enhanced favorite button states with better visual feedback */\n.favorite-button,\n.favorite-page,\n.favorite-quick-fact {\n    position: relative;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    cursor: pointer;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n}\n\n/* Loading state for buttons */\n.favorite-button.is-loading,\n.favorite-page.is-loading,\n.favorite-quick-fact.is-loading {\n    opacity: 0.7;\n    pointer-events: none;\n}\n\n.favorite-button.is-loading::after,\n.favorite-page.is-loading::after,\n.favorite-quick-fact.is-loading::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 16px;\n    height: 16px;\n    margin: -8px 0 0 -8px;\n    border: 2px solid #ccc;\n    border-top-color: #dc2626;\n    border-radius: 50%;\n    animation: favoritesSpinner 1s linear infinite;\n}\n\n@keyframes favoritesSpinner {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n/* Enhanced favorited state */\n.favorite-button.is-favorited,\n.favorite-button.is-favorite,\n.favorite-page.is-favorite,\n.favorite-quick-fact.is-favorite {\n    color: #dc2626;\n    transform: scale(1.05);\n}\n\n.favorite-button.is-favorited .fa-heart,\n.favorite-button.is-favorite .fa-heart,\n.favorite-page.is-favorite .fa-heart,\n.favorite-quick-fact.is-favorite .fa-heart {\n    color: #dc2626;\n    animation: heartBeat 0.6s ease-in-out;\n}\n\n@keyframes heartBeat {\n    0%, 100% { transform: scale(1); }\n    50% { transform: scale(1.2); }\n}\n\n/* Saint-specific button animations */\n.saint-favorite-clicked {\n    animation: saintFavoriteClick 0.6s ease-out;\n}\n\n@keyframes saintFavoriteClick {\n    0% { transform: scale(1); }\n    25% { transform: scale(0.95) rotate(-2deg); }\n    50% { transform: scale(1.1) rotate(2deg); }\n    75% { transform: scale(0.98) rotate(-1deg); }\n    100% { transform: scale(1) rotate(0deg); }\n}\n\n/* Pulse animation for icons */\n.animate-pulse {\n    animation: pulse 0.8s ease-in-out;\n}\n\n@keyframes pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50% { opacity: 0.7; transform: scale(1.1); }\n}\n\n/* Dashboard favorites enhancements */\n.favorites-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 20px;\n    padding: 20px 0;\n}\n\n.favorite-card {\n    background: #fff;\n    border: 1px solid #e5e7eb;\n    border-radius: 12px;\n    padding: 20px;\n    transition: all 0.3s ease;\n    position: relative;\n    overflow: hidden;\n}\n\n.favorite-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\n    border-color: #d1d5db;\n}\n\n.favorite-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n}\n\n.favorite-card-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #111827;\n    margin: 0;\n    line-height: 1.4;\n}\n\n.favorite-card-type {\n    background: #f3f4f6;\n    color: #6b7280;\n    padding: 4px 8px;\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: capitalize;\n}\n\n.favorite-card-actions {\n    display: flex;\n    gap: 8px;\n    margin-top: 16px;\n}\n\n.favorite-card-actions .btn {\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 6px;\n    transition: all 0.2s ease;\n}\n\n/* Mobile responsiveness */\n@media (max-width: 768px) {\n    .favorites-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n        padding: 16px 0;\n    }\n    \n    .favorite-card {\n        padding: 16px;\n    }\n    \n    .favorite-card-actions {\n        flex-direction: column;\n    }\n    \n    .favorite-card-actions .btn {\n        width: 100%;\n        text-align: center;\n    }\n    \n    /* Enhanced touch targets for mobile */\n    .favorite-button,\n    .favorite-page,\n    .favorite-quick-fact {\n        min-height: 44px;\n        min-width: 44px;\n        padding: 12px;\n    }\n    \n    /* Better spacing on mobile */\n    .dashboard-tabs-nav {\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n    \n    .dashboard-tabs-nav a {\n        padding: 12px 16px;\n        font-size: 14px;\n    }\n}\n\n/* Journey integration modal enhancements */\n.journey-modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 9999;\n    opacity: 0;\n    visibility: hidden;\n    transition: all 0.3s ease;\n}\n\n.journey-modal.show {\n    opacity: 1;\n    visibility: visible;\n}\n\n.journey-modal-content {\n    background: #fff;\n    border-radius: 12px;\n    width: 90%;\n    max-width: 500px;\n    max-height: 80vh;\n    overflow-y: auto;\n    transform: scale(0.9) translateY(20px);\n    transition: all 0.3s ease;\n}\n\n.journey-modal.show .journey-modal-content {\n    transform: scale(1) translateY(0);\n}\n\n.journey-modal-header {\n    padding: 20px;\n    border-bottom: 1px solid #e5e7eb;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.journey-modal-close {\n    background: none;\n    border: none;\n    font-size: 24px;\n    cursor: pointer;\n    color: #6b7280;\n    transition: color 0.2s ease;\n}\n\n.journey-modal-close:hover {\n    color: #111827;\n}\n\n/* Notification system enhancements */\n.favorites-notification {\n    position: fixed;\n    top: 20px;\n    right: 20px;\n    padding: 16px 20px;\n    border-radius: 8px;\n    color: white;\n    font-weight: 500;\n    font-size: 14px;\n    z-index: 10000;\n    max-width: 350px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    transform: translateX(100%);\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.favorites-notification.show {\n    transform: translateX(0);\n}\n\n.favorites-notification.success {\n    background-color: #059669;\n}\n\n.favorites-notification.error {\n    background-color: #dc2626;\n}\n\n.favorites-notification.info {\n    background-color: #3b82f6;\n}\n\n.favorites-notification.warning {\n    background-color: #d97706;\n}\n\n/* Cross-page synchronization indicator */\n.favorites-sync-indicator {\n    position: fixed;\n    top: 10px;\n    right: 10px;\n    width: 8px;\n    height: 8px;\n    background: #10b981;\n    border-radius: 50%;\n    z-index: 9998;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.favorites-sync-indicator.active {\n    opacity: 1;\n    animation: syncPulse 1s ease-in-out infinite;\n}\n\n@keyframes syncPulse {\n    0%, 100% { transform: scale(1); opacity: 1; }\n    50% { transform: scale(1.5); opacity: 0.7; }\n}\n\n/* Empty state improvements */\n.empty-favorites {\n    text-align: center;\n    padding: 40px 20px;\n    color: #6b7280;\n}\n\n.empty-favorites i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-favorites h3 {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 600;\n    color: #374151;\n}\n\n.empty-favorites p {\n    margin: 0;\n    font-size: 14px;\n    line-height: 1.5;\n}\n\n/* Error state styling */\n.favorites-error {\n    text-align: center;\n    padding: 40px 20px;\n    color: #dc2626;\n    background: #fef2f2;\n    border: 1px solid #fecaca;\n    border-radius: 8px;\n    margin: 20px 0;\n}\n\n/* Loading state improvements */\n.favorites-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: #6b7280;\n}\n\n.favorites-loading .spinner {\n    width: 24px;\n    height: 24px;\n    border: 2px solid #e5e7eb;\n    border-top-color: #3b82f6;\n    border-radius: 50%;\n    margin-right: 12px;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n    .favorite-button.is-favorited,\n    .favorite-button.is-favorite {\n        background: #dc2626;\n        color: white;\n        border: 2px solid #000;\n    }\n    \n    .favorite-card {\n        border: 2px solid #000;\n    }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n    .favorite-button,\n    .favorite-card,\n    .journey-modal,\n    .favorites-notification {\n        transition: none;\n        animation: none;\n    }\n    \n    .saint-favorite-clicked,\n    .animate-pulse {\n        animation: none;\n    }\n}\n