/* parts/blocks/flow-diagrams/flow-diagrams-acf-block.css */

/* Base styles for the diagram container */
.flow-diagram-container {
    margin: 2vw auto 0 auto !important;
    overflow-x: auto; /* Always allow horizontal scrolling if needed */
    scrollbar-color: #282828 #fff;
}

/* Diagram container should not limit the width */
.flow-diagram-container .diagram {
    width: 100%; /* Let the diagram take the full width of the container */
    margin: 0 auto;
    min-width: 780px; /* Ensure the diagram doesn't shrink below 780px */
}

/* SVG should fill the diagram container */
.flow-diagram-container .diagram svg {
    width: 100%;
    height: auto;
}

.flow-diagram-container .diagram svg .diagram-point {
    transition: all .3s ease-in-out;
	fill: #333;
}

.flow-diagram-container .diagram svg .diagram-point-number {
	pointer-events: none;
}

.flow-diagram-container .diagram svg .diagram-point:hover {
    fill: var(--wp--preset--color--red);
    cursor: pointer;
}

/* Media query for screens wider than 780px */
@media (min-width: 991px) {
    .flow-diagram-container {
        overflow-x: hidden; /* Hide horizontal scrollbar when not needed */
    }
    .flow-diagram-container .diagram {
        width: 70%;
        min-width: 70%; /* Diagram scales with the container */
    }
    .flow-diagram-container .diagram svg {
        width: 100%;
        height: auto;
    }
}

/* Existing styles remain unchanged */

.flow-diagram-content {
    margin-top: 20px;
    display: none;
}

.flow-diagram-content.active {
    display: block;
}

.flow-diagram-content .content-value {
    display: none;
}

.flow-diagram-content .content-value.active {
    display: block;
}

.flow-diagram-breadcrumbs {
    border-left: 4px solid #232323;
    padding-left: 12px;
	display: none!important;
}

.breadcrumb-link {
    text-decoration: underline;
    transition: all .3s ease-in-out;
}

.breadcrumb-link:hover {
    cursor: pointer;
    color: var(--wp--preset--color--red);
}

.fd-return-link {
    align-items: center;
    vertical-align: middle;
    transition: all .3s ease-in-out;
}

.fd-return-link:hover {
    cursor: pointer;
    color: var(--wp--preset--color--red);
}

.fd-return-link svg {
    margin-right: 12px;
}

.fd-return-link .return-link-dynamic-content {
    margin-left: 4px;
}

.content-value h3 {
    display: flex;
    gap: 12px;
}

.content-value .point-number {
    display: flex;
    background-color: var(--wp--preset--color--red);
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    line-height: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
}