/* goal-config — styles page (migration DA, ne pas dupliquer la coque) */

.btn-danger { background: rgba(220, 38, 38, 0.8); color: white; padding: 10px 18px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
        .btn-danger:hover { background: rgba(220, 38, 38, 1); }

        .preview-goal-wrap { width: 100%; }
        .preview-goal-wrap.preview-goal-wrap--shape {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .preview-goal {
            border-radius: 8px;
            overflow: hidden;
            display: block;
            border: none;
            background: #0f0f0f;
        }
        .preview-goal.preview-goal--bar {
            width: 100%;
            height: 5rem;
            min-height: 80px;
            max-height: 120px;
        }
        .preview-goal.preview-goal--shape {
            width: 100%;
            max-width: 400px;
            height: 400px;
            min-height: 320px;
            aspect-ratio: 1;
        }
        .preview-goal.preview-goal--shape-mug {
            max-width: 440px;
            aspect-ratio: 10 / 11;
        }
        .preview-goal.preview-goal--shape-droplet {
            max-width: 340px;
            aspect-ratio: 7 / 10;
        }
        .preview-goal.preview-goal--shape-heart,
        .preview-goal.preview-goal--shape-barrel,
        .preview-goal.preview-goal--shape-revolver-cylinder,
        .preview-goal.preview-goal--shape-oak-leaf {
            max-width: 380px;
            aspect-ratio: 1;
        }

        @media (max-width: 640px) {
            .goal-code-tabs-wrap { flex-direction: column; align-items: flex-start; }
            .goal-code-tabs {
                width: 100%;
                flex-wrap: wrap;
            }
            .goal-code-tabs .tab-btn {
                flex: 1 1 calc(50% - 0.5rem);
                min-width: 0;
                padding-inline: 10px;
                white-space: normal;
                line-height: 1.2;
            }
            .goal-overlay-url-row {
                flex-wrap: wrap;
            }
            .goal-overlay-url-row #goal-overlay-url {
                flex: 1 1 100%;
                min-width: 0;
            }
        }