/* Styly pro modální okno sdílení */
    .share-button-main { font-size: 1em; padding: 10px 20px; border: none; border-radius: 5px; font-weight: bold; color: white; cursor: pointer; background-image: linear-gradient(45deg, #ff9800 0%, #ff5722 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease; animation: pulse-animation 2s infinite; }
    .share-button-main:hover { transform: translateY(-2px); }
    .share-modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); animation: fadeIn 0.3s; }
    .share-modal-content { background-color: #fff; margin: 10% auto; padding: 25px; border: 1px solid #888; width: 90%; max-width: 450px; border-radius: 12px; position: relative; box-shadow: 0 5px 25px rgba(0,0,0,0.3); text-align: center; }
    .share-modal-close { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }
    .share-modal-close:hover { color: #333; }
    .share-modal-content h2 { margin-top: 0; }
    .social-icons { display: flex; justify-content: center; gap: 15px; margin: 1.5rem 0; }
    .social-icons a { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; text-decoration: none; color: white; font-weight: bold; font-size: 1.5em; transition: transform 0.2s; }
    .social-icons a:hover { transform: scale(1.1); }
    #shareTwitter { background-color: #000000; }
    #shareFacebook { background-color: #1877F2; }
    #shareReddit { background-color: #FF4500; font-size: 1.2em; }
    #shareWhatsApp { background-color: #25D366; }
    #shareTelegram { background-color: #26A5E4; }
    #shareEmail { background-color: #7f8c8d; }
    .social-icons i { font-size: 1.2em; }
    .copy-link-container { display: flex; align-items: center; }
    .copy-link-container input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-right: none; border-radius: 5px 0 0 5px; background-color: #f4f4f4; height: 40px; box-sizing: border-box; margin: 0; }
    .copy-link-container button { padding: 10px 15px; border: 1px solid #6f42c1; background-color: #6f42c1; color: white; border-radius: 0 5px 5px 0; cursor: pointer; height: 40px; box-sizing: border-box; margin: 0; }
    .qr-code-container { margin-top: 1.5rem; }
    #qrcode { width: 150px; height: 150px; margin: 0 auto; border: 5px solid white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    #qrcode img { width: 100% !important; height: 100% !important; }
    .qr-code-container p { font-size: 0.8em; color: #6c757d; margin-top: 0.5rem; }
    @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

    .update-info-text {
    font-size: 0.95em;
    color: #6c757d;
    background-color: #f8f9fa;
    border-left: 4px solid #dee2e6;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    }

    /* === STYLY PRO ZÁLOŽKY === */
    .nav-tabs {
        display: flex;
        border-bottom: 2px solid #dee2e6;
        margin-bottom: 1.5rem;
    }
    .nav-tab {
        padding: 1rem 1.5rem;
        cursor: pointer;
        border: none;
        background: none;
        font-size: 1.1rem;
        font-weight: 500;
        color: #6c757d;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px; /* Zarovnání s hlavní linkou */
    }
    .nav-tab.active {
        color: #495057;
        border-bottom-color: #6f42c1;
    }
    .tab-pane { display: none; }
    .tab-pane.active { display: block; }

    /* Styly pro akční box v sidebaru */
    .sidebar-action-box {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    .sidebar-action-box h3 {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.2em;
        text-align: center;
    }
    .sidebar-action-box .support-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .sidebar-action-box input[type="number"] {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 1em;
        box-sizing: border-box; /* Důležité pro správné zobrazení */
    }
    .sidebar-action-box button {
        width: 100%;
        padding: 12px;
        border-radius: 5px;
        border: none;
        background-color: #007bff;
        color: white;
        font-weight: bold;
        font-size: 1.1em;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .sidebar-action-box button:hover {
        background-color: #0056b3;
    }

    /* === STYLY PRO AKTUALIZACE === */
    .update-timeline { border-left: 3px solid #e9ecef; margin-left: 20px; padding: 0 0 1rem 20px; }
    .update-item { position: relative; margin-bottom: 1.5rem; }
    .update-item::before { content: ''; position: absolute; left: -29px; top: 5px; width: 15px; height: 15px; background-color: #6f42c1; border-radius: 50%; border: 3px solid #fff; }
    .update-item .timestamp { font-size: 0.8em; color: #6c757d; margin-bottom: 0.25rem; }
    .update-item .update-text { background-color: #f8f9fa; padding: 1rem; border-radius: 8px; }
    
    /* Layout a Sidebar */
    .idea-detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; max-width: 1200px; margin: 2rem auto; }
    .main-content { background-color: #fff; border: 1px solid #ddd; padding: 2rem; border-radius: 8px; }
    .leaderboard { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; }
    .leaderboard h3 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 0.75rem; margin-bottom: 1rem; }
    .supporter-list { list-style: none; padding: 0; max-height: 400px; overflow-y: auto; }
    .supporter-item { display: flex; align-items: center; padding: 0.75rem; border-radius: 5px; margin-bottom: 0.5rem; transition: background-color 0.2s; }
    .supporter-rank { font-size: 1.2em; font-weight: bold; margin-right: 1rem; width: 30px; text-align: center; }
    .supporter-name { flex-grow: 1; }
    .pledge-amount { font-weight: bold; color: #007bff; }
    .supporter-item.gold { background-color: #fff3cd; }
    .supporter-item.silver { background-color: #e9ecef; }
    .supporter-item.bronze { background-color: #f8d7da; }
    .supporter-item.current-user { border: 2px solid #007bff; }

    /* Dynamické boxy a video */
    .status-info-box { text-align: center; padding: 2rem; border-radius: 8px; margin-top: 1.5rem; border: 1px solid; }
    .status-info-box.info { background-color: #e7f1ff; border-color: #b8d6fb; color: #004085; }
    .status-info-box.success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; }
    .status-info-box.danger { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
    .status-info-box h3 { margin-top: 0; }
    .video-embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin-top: 1rem; border-radius: 8px; }
    .video-embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .countdown-timer { background-color: #fff3cd; color: #856404; padding: 10px 15px; border-radius: 5px; border-left: 4px solid #ffc107; font-weight: 500; display: inline-block; margin-top: 1rem; }
    .funded-notification { color: #155724; background-color: #d4edda; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: 1px solid #c3e6cb; }
    .btn { padding: 8px 16px; border-radius: 5px; text-decoration: none; font-weight: bold; border: none; cursor: pointer; }
    .btn-success { background-color: #28a745; color: white; }
    .btn-danger { background-color: #dc3545; color: white; }

    /* === STYLY PRO NOVÝ PROGRESS BAR A MILNÍKY === */
    .progress-bar-container { width: 100%; background-color: #e9ecef; border-radius: 8px; height: 20px; position: relative; margin-top: 1rem; display: flex; overflow: hidden; }
    .progress-bar-fill-total { position: absolute; left: 0; top: 0; height: 100%; background-color: rgba(40, 167, 69, 0.8); border-radius: 8px; transition: width 0.5s ease-in-out; }
    .progress-segment { height: 100%; transition: width 0.5s ease-in-out; }
    .milestones-list { list-style: none; padding: 0; margin-top: 1rem; }
    .milestone-item { position: relative; padding-left: 30px; margin-bottom: 0.75rem; }

    .milestone-item::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: '\f111'; /* Ikona prázdného kolečka */
        position: absolute;
        left: 0;
        top: 2px;
        font-size: 1.2em;
        line-height: 1;
        color: #ced4da;
    }
    .milestone-item.achieved::before {
        content: '\f058'; /* Ikona fajfky v kolečku */
        color: #28a745; /* Zelená barva */
    }
    .milestone-item.achieved {
        color: #212529; /* Standardní tmavá barva textu */
        text-decoration: none; /* Odstraněno přeškrtnutí */
    }
    .milestone-item.next-goal { 
        font-weight: bold; 
    }
    
    /* Styly pro komentáře */
    .comments-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e0e0e0; }
    .comment { display: flex; gap: 15px; margin-bottom: 1.5rem; padding: 1rem; background-color: #f8f9fa; border-radius: 8px; }
    .comment-avatar img { width: 48px; height: 48px; border-radius: 50%; }
    .comment-body { flex-grow: 1; }
    .comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 0.5rem; }
    .comment-header .username { font-weight: bold; }
    .comment-header .timestamp { font-size: 0.8rem; color: #6c757d; }
    .comment-text { line-height: 1.6; }
    .comment.creator-comment { background-color: #fceeff; border-left: 4px solid #9c27b0; }
    .comment.proposer-comment { background-color: #e8f5e9; border-left: 4px solid #4CAF50; }
    .comment-badge { font-size: 0.75rem; font-weight: bold; padding: 2px 8px; border-radius: 10px; color: white; }
    .badge-creator { background-color: #9c27b0; }
    .badge-proposer { background-color: #4CAF50; }
    .load-comments-btn {display: block;width: 100%;text-align: center;padding: 0.75rem;margin-top: 1rem;font-weight: bold;color: #495057; /* Tmavě šedý text */background-color: #f8f9fa; /* Velmi světle šedé pozadí */border: 1px solid #dee2e6; /* O něco tmavší rámeček */border-radius: 8px;cursor: pointer;transition: background-color 0.2s, color 0.2s;}
    .load-comments-btn:hover {
    background-color: #e9ecef; /* Tmavší šedá při najetí myší */
    color: #212529;
}
    .load-comments-btn:hover { background-color: #f1f1f1; }
    
    /* Ostatní styly */
    .idea-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
    .idea-header h1 { margin: 0; }
    .creator-info { display: flex; align-items: center; margin-bottom: 1.5rem; background-color: #f8f9fa; padding: 1rem; border-radius: 5px; }
    .creator-info a { text-decoration: underline; color: #007bff; font-size: 1.2rem; font-weight: bold; }   
    .idea-creator-channels { display: flex; align-items: center; margin-left: 20px; }
    .idea-creator-channels img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; }
    .idea-detail-actions { margin-bottom: 2rem; }
    .idea-detail-actions h3 { margin-top: 0; margin-bottom: 1rem; }
    .idea-detail-actions .actions-wrapper { display: flex; justify-content: space-between; align-items: flex-start; }
    .idea-detail-actions form { margin: 0; padding: 0; border: none; background: none; }
    .idea-detail-actions .support-form {
        display: flex;
        gap: 5px;
        align-items: center; /* Přidáno pro jistotu, i když hlavní práci odvede sjednocení výšky */
    }

    .idea-detail-actions .support-form input[type="number"],
    .idea-detail-actions .support-form button,
    .idea-detail-actions .support-form a.btn {
        height: 42px; /* Pevně nastavíme stejnou výšku */
        padding-top: 8px;
        padding-bottom: 8px;
        box-sizing: border-box; /* Zajistí, že se výška počítá stejně */
        margin: 0;
        font-size: 1rem;
        vertical-align: middle;
    }

    .idea-detail-actions .support-form input[type="number"] {
        width: 150px; /* Mírně zvětšíme pole pro lepší vzhled */
    }

    /* Styly pro odkaz "Log in to Support", aby vypadal jako tlačítko */
    .idea-detail-actions .support-form a.btn {
        display: inline-flex; /* Důležité pro zarovnání textu na střed */
        align-items: center;
        justify-content: center;
        text-decoration: none;
        text-align: center; 
        background-color: #007bff; 
        color: white; 
        padding-left: 16px;
        padding-right: 16px;
        border-radius: 4px; 
        font-weight: bold; 
        white-space: nowrap;
    }
    .btn-primary { background-color: #007bff; color: white; }
    .btn-primary:hover { background-color: #0056b3; }

    .btn-secondary { background-color: #6c757d; color: white; }
    .btn-secondary:hover { background-color: #5a6268; }
    .withdraw-section { display: flex; flex-direction: column; align-items: flex-end; }
    .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
    .modal-content { background-color: #fefefe; margin: 15% auto; padding: 25px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; position: relative; }
    .modal-content .close { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }
    .fallback-avatar-detail { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background-color: #e9ecef; border: 2px solid #fff; margin-left: -10px; vertical-align: middle; }
    .key-moments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
    .key-moment-card { display: flex; align-items: center; background-color: #f8f9fa; border: 1px solid #dee2e6; border-left: 5px solid #0d6efd; padding: 1rem; border-radius: 8px; }
    .key-moment-icon { font-size: 1.5em; margin-right: 1rem; }
    .key-moment-text { font-weight: 500; color: #343a40; }

    /* Responzivita */
    @media (max-width: 992px) {
        .idea-detail-layout {
            grid-template-columns: 1fr; /* Jeden sloupec */
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0;
            gap: 0;
        }

        .main-content {
            border: none;
            box-shadow: none;
            border-radius: 0;
            padding: 1rem;
        }

        .sidebar {
            order: -1; /* Sidebar půjde nahoru */
            margin-bottom: 0;
            padding: 1rem;
        }

        .idea-header {
            display: flex;
            flex-direction: column-reverse;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .share-button-main {
            width: 100%;
            padding: 0.75rem;
            font-size: 1.1rem;
        }
        
        .nav-tabs {
            overflow-x: auto;
            white-space: nowrap;
        }

        /* --- 2. NOVÁ OPRAVA (Box "Actions") --- */
        .idea-detail-actions .actions-wrapper {
            /* Přepneme z "vedle sebe" na "pod sebou" */
            flex-direction: column;
            gap: 1.5rem; /* Mezera mezi Support a Withdraw */
        }

        .idea-detail-actions .support-form {
            /* Formulář pro "Support" roztáhneme na 100% */
            width: 100%;
        }

        .idea-detail-actions .support-form input[type="number"] {
            flex-grow: 1; /* Pole pro částku zabere zbytek místa */
        }

        .withdraw-section {
            /* Tlačítko "Withdraw" zarovnáme na 100% */
            width: 100%;
            align-items: stretch; /* Tlačítko se roztáhne */
        }

        .withdraw-section form,
        .withdraw-section button {
            width: 100%; /* Tlačítko bude na plnou šířku */
        }
    }
    /* === KONEC BLOKU PRO MOBILY === */


    @keyframes pulse-animation {
        0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
    }

    .comments-section form textarea {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1rem;
    }

    #tab-updates form textarea {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 1rem;
    }

    /* Styling pro zástupný video přehrávač s náhledem */
    .video-fallback-container {
        position: relative;
        width: 100%;
        padding-top: 56.25%; 
        background-color: #000;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
    }

    .video-fallback-container .thumbnail-link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .video-fallback-container .thumbnail-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; 
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .video-fallback-container:hover .thumbnail-image {
        transform: scale(1.05);
        opacity: 0.7;
    }

    .video-fallback-container .fallback-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.6);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .video-fallback-container:hover .fallback-overlay {
        opacity: 1;
    }

    .video-fallback-container .play-icon {
        color: white;
        font-size: 4rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }

    .video-fallback-container .fallback-text {
        color: white;
        font-size: 1.2rem;
        font-weight: bold;
        margin-top: 10px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

    .thumbnail-image.placeholder {
        object-fit: contain;
        background-color: #f0f2f5;
        padding: 2rem;
        box-sizing: border-box;
    }