/**
 * Questory Pro Frontend Styles
 *
 * @package Questory_Pro
 * @since 1.0.0
 */

/* 
 * IMPORTANT CSS ARCHITECTURE NOTE:
 * =================================
 * The free plugin already includes comprehensive CSS for Save/Load controls
 * in storywizard-saveload.css (blue buttons, CSS icons, positioning, etc.).
 * 
 * This Pro CSS file should NOT override those Save/Load styles because:
 * 1. Both plugins share the same Save/Load implementation
 * 2. Overriding causes visual inconsistencies between direct and shortcode views
 * 3. The free plugin's styles are already well-designed and complete
 * 
 * This file only adds Pro-specific enhancements that don't conflict:
 * - Random choice indicators
 * - Timed decision UI
 * - Frontend edit links
 * - Modal enhancements
 * =================================
 */

/* Save/Load modal enhancements for Pro features */
.storywizard-save-modal,
.storywizard-load-modal {
    backdrop-filter: blur(5px);
}

.storywizard-modal-content {
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    animation: modalSlideIn 0.3s ease;
}

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

/* Edit links enhancement */
.storywizard-edit-links {
    background: rgba(0, 115, 170, 0.05);
    border: 1px solid rgba(0, 115, 170, 0.2);
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
}

.storywizard-edit-links a {
    color: #0073aa;
    text-decoration: none;
    margin-right: 15px;
    font-size: 13px;
}

.storywizard-edit-links a:hover {
    text-decoration: underline;
}

/* Random choice indicator */
.storywizard-random-choice-indicator {
    background: #ff9800;
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    margin-bottom: 10px;
    display: inline-block;
}

/* Timed decision UI container */
.storywizard-timer-container {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 4px;
}

/* Timed decision progress bar */
.storywizard-timer-bar {
    position: relative;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}

.storywizard-timer-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #ff9800, #f44336);
    transition: width 1s linear;
    border-radius: 3px;
}

.storywizard-timer-text {
    text-align: center;
    font-size: 14px;
    color: #666;
    font-weight: bold;
}

/* Pro feature badge */
.questory-pro-badge {
    display: inline-block;
    background: #0073aa;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
    font-weight: bold;
}

/* Save notification animation */
.save-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #4caf50;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    font-size: 14px;
    z-index: 10001;
    display: none;
}

/* Shuffle animation for random choices */
.storywizard-choice-btn.shuffling {
    animation: cardFlip 0.6s ease-in-out;
}

.storywizard-choice-btn.selected {
    background-color: #4a90e2 !important;
    color: white !important;
    transform: scale(1.05);
}

/* Dark theme support for Pro features */
.storywizard-interactive[data-theme="dark"] .storywizard-timer-container {
    background: rgba(255, 193, 7, 0.05);
    border-color: rgba(255, 193, 7, 0.2);
}

.storywizard-interactive[data-theme="dark"] .storywizard-timer-text {
    color: #ccc;
}