/* =========================================
   Step 2 Mockup Styles (List + Chart)
   ========================================= */

/* Reuse transparency from Step 1 logic but specific class */
/* Reuse transparency from Step 1 logic but specific class */
.step2-mockup-container {
    /* Layout properties copied from .hiw-visual-card to maintain size */
    width: 100%;
    aspect-ratio: 4/3;

    background: transparent !important;
    position: relative;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 100%; <--- removed to let aspect-ratio control it like before */
    /* min-height: 400px; <--- removed or adjusted if needed, but aspect-ratio is safer match */
}

/* Mockup List Card (Bottom Layer) */
.mockup-list-card {
    position: absolute;
    left: 0;
    top: 20px;
    width: 65%;
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 20px 20px 40px 20px;

    /* Removed mask as well if we want it fully clean, or keep it? 
       If we remove background, mask might not be needed or might hiding text. 
       Let's remove the card visual entirely. */
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 1;
}

.mockup-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mockup-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.mockup-list li:last-child {
    border-bottom: none;
}

.m-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
}

.m-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.m-title {
    font-size: 0.95rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.m-bar-container {
    display: flex;
    gap: 4px;
    align-items: center;
}

.m-bar {
    height: 4px;
    border-radius: 2px;
    opacity: 0.8;
}

.m-bar.green {
    background: #37C384;
}

.m-bar.orange {
    background: #F97316;
}

.m-arrow {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Floating Chart Card (Top Layer) */
.glass-stats-card {
    position: absolute;
    right: 0;
    bottom: 20px;
    width: 55%;
    padding: 24px;

    /* Strong Glassmorphism */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    /* Highlights */
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    animation: float-delayed 6s ease-in-out infinite;
}

.chart-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
}

.donut-chart {
    transform: rotate(-90deg);
}

.chart-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.chart-number {
    display: block;
    font-size: 2.2rem;
    font-family: 'Playfair Display', serif;
    line-height: 1;
}

.chart-label {
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-legend {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.l-bar {
    width: 60px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.l-bar.green {
    background: #37C384;
}

.l-bar.orange {
    background: #F97316;
}

/* Animations */
@keyframes float-delayed {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .step2-mockup-container {
        min-height: 350px;
        margin-top: 40px;
    }

    .mockup-list-card {
        width: 70%;
        left: 5%;
    }

    .glass-stats-card {
        width: 60%;
        right: 5%;
    }
}