/* Responsive Flowchart Widget Styles */

.flowchart-container {
    position: relative;
    width: 100%;
    max-width: 1168px;
    height: auto;
    margin: 0 auto;
}

.flowchart-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none; /* Hide by default, shown only on desktop */
}

.mobile-flowchart-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none; /* Hide by default, shown only on mobile */
}

.icons-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 344px;
}

.icon-container {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInFromLeft 0.8s ease-out forwards;
    transition: transform 0.2s ease;
}

.icon-container:hover {
    transform: translateX(0) scale(1.1);
}

@keyframes slideInFromLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes drawLine {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.icon-container svg {
    width: 32px;
    height: 32px;
    fill: white;
}

.icon-container img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

.text-label {
    width:100px;
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    text-align: center;
    z-index: 3;
    white-space: normal;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop layout - positions and staggered animations */
.icon-container:nth-child(odd) { /* For 1st, 3rd, 5th... icons (top wave) */
    top: 92px;
}
.icon-container:nth-child(even) { /* For 2nd, 4th, 6th... icons (bottom wave) */
    top: 222px;
}

.text-label:nth-child(odd) { /* For 1st, 3rd, 5th... text labels (top wave) */
    top: 160px;
}
.text-label:nth-child(even) { /* For 2nd, 4th, 6th... text labels (bottom wave) */
    top: 290px;
}

/* Horizontal positioning for desktop */
.icon-1, .text-1 { left: 0px; }
.icon-2, .text-2 { left: 184px; }
.icon-3, .text-3 { left: 368px; }
.icon-4, .text-4 { left: 552px; }
.icon-5, .text-5 { left: 736px; }
.icon-6, .text-6 { left: 920px; }
.icon-7, .text-7 { left: 1104px; }
.icon-8, .text-8 { left: 1288px; }
.icon-9, .text-9 { left: 1472px; }
.icon-10, .text-10 { left: 1656px; }

/* Animation delays */
.icon-1 { animation-delay: 0.2s; }
.icon-2 { animation-delay: 0.4s; }
.icon-3 { animation-delay: 0.6s; }
.icon-4 { animation-delay: 0.8s; }
.icon-5 { animation-delay: 1.0s; }
.icon-6 { animation-delay: 1.2s; }
.icon-7 { animation-delay: 1.4s; }
.icon-8 { animation-delay: 1.6s; }
.icon-9 { animation-delay: 1.8s; }
.icon-10 { animation-delay: 2.0s; }

.text-1 { animation-delay: 0.4s; }
.text-2 { animation-delay: 0.6s; }
.text-3 { animation-delay: 0.8s; }
.text-4 { animation-delay: 1.0s; }
.text-5 { animation-delay: 1.2s; }
.text-6 { animation-delay: 1.4s; }
.text-7 { animation-delay: 1.6s; }
.text-8 { animation-delay: 1.8s; }
.text-9 { animation-delay: 2.0s; }
.text-10 { animation-delay: 2.2s; }

/* Mobile layout */
@media (max-width: 768px) {
    .flowchart-container {
        height: auto;
        padding-bottom: 40px;
    }
    
    .flowchart-svg {
        display: none;
    }
    
    .mobile-flowchart-svg {
        display: block;
    }
    
    .icons-wrapper {
        height: auto;
        min-height: 800px;
    }
    
    /* Reset all icon positions for mobile */
    .icon-container {
        position: absolute;
        left: 50% !important;
        transform: translateX(-50%) translateX(-50px);
        animation: slideInFromLeftMobile 0.8s ease-out forwards;
    }
    
    @keyframes slideInFromLeftMobile {
        to {
            opacity: 1;
            transform: translateX(-50%) translateX(0);
        }
    }
    
    .icon-container:hover {
        transform: translateX(-50%) scale(1.1);
    }
    
    /* Mobile icon positions - dynamic based on item count */
    .icon-container {
        top: var(--icon-top-mobile);
    }
    
    .text-label {
        top: var(--text-top-mobile);
        left: 60% !important;
        transform: translateX(-50%) translateY(20px);
        text-align: center;
        white-space: normal;
        width: 100px;
    }
    
    /* Adjust mobile wrapper height based on item count */
    .icons-wrapper {
        min-height: calc(120px * var(--item-count, 7) + 80px);
    }
}

/* Tablet layout adjustments */
@media (min-width: 769px) and (max-width: 1200px) {
    .flowchart-container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .flowchart-svg {
        display: block;
    }
    
    .mobile-flowchart-svg {
        display: none;
    }
    
    /* Scale down desktop positions for tablet */
    .icon-1 { left: calc(0px * 0.8); }
    .icon-2 { left: calc(184px * 0.8); }
    .icon-3 { left: calc(368px * 0.8); }
    .icon-4 { left: calc(552px * 0.8); }
    .icon-5 { left: calc(736px * 0.8); }
    .icon-6 { left: calc(920px * 0.8); }
    .icon-7 { left: calc(1104px * 0.8); }
    .icon-8 { left: calc(1288px * 0.8); }
    .icon-9 { left: calc(1472px * 0.8); }
    .icon-10 { left: calc(1656px * 0.8); }
    
    .text-1 { left: calc(0px * 0.8); }
    .text-2 { left: calc(184px * 0.8); }
    .text-3 { left: calc(368px * 0.8); }
    .text-4 { left: calc(552px * 0.8); }
    .text-5 { left: calc(736px * 0.8); }
    .text-6 { left: calc(920px * 0.8); }
    .text-7 { left: calc(1104px * 0.8); }
    .text-8 { left: calc(1288px * 0.8); }
    .text-9 { left: calc(1472px * 0.8); }
    .text-10 { left: calc(1656px * 0.8); }
}

/* Large desktop layout */
@media (min-width: 1201px) {
    .flowchart-svg {
        display: block;
    }
    
    .mobile-flowchart-svg {
        display: none;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .icon-container,
    .text-label {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .flowchart-svg path,
    .mobile-flowchart-svg path {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .icon-container {
        border: 2px solid;
    }
    
    .text-label {
        font-weight: 900;
    }
}

/* Print styles */
@media print {
    .flowchart-container {
        max-width: none;
        width: 100%;
    }
    
    .icon-container,
    .text-label {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .flowchart-svg,
    .mobile-flowchart-svg {
        display: block;
    }
}