/* How It Works Widget Styles */

/* Variables */
:root {
    --hiw-brand-dark: #284b63;
    --hiw-brand-light: #f3f4f6;
    --hiw-gray-200: #e5e7eb;
    --hiw-gray-500: #6b7280;
    --hiw-gray-900: #111827;
}

.hiw-container {
    max-width: 1280px;
    /* max-w-7xl */
    margin: 0 auto;
    padding: 0 1rem;
    /* px-4 */
    width: 100%;
}

@media (min-width: 640px) {
    .hiw-container {
        padding: 0 1.5rem;
        /* sm:px-6 */
    }
}

@media (min-width: 1024px) {
    .hiw-container {
        padding: 0 2rem;
        /* lg:px-8 */
    }
}

/* Header */
.hiw-header h2 {
    font-size: 2.25rem;
    /* text-4xl */
    line-height: 2.5rem;
    font-weight: 700;
    /* font-bold */
    color: var(--hiw-gray-900);
    margin-bottom: 3rem;
    /* mb-12 */
    letter-spacing: -0.025em;
    /* tracking-tight */
}

.hiw-header p {
    font-size: 1.125rem;
    /* text-lg */
    color: var(--hiw-gray-500);
}

/* Grid Layout */
.hiw-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    /* gap-12 */
    align-items: center;
}

@media (min-width: 1024px) {
    .hiw-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* lg:grid-cols-2 */
        gap: 5rem;
        /* lg:gap-20 */
    }
}

.hiw-grid.flex-row-reverse {
    /* Elementor handles direction typically, but if we used flex we'd need this. 
       Since we use grid, we might need order property or just swap cols in HTML 
       (which we didn't do in PHP, we just added a class). 
       Let's use order for grid. */
}

.hiw-grid.flex-row-reverse .hiw-image-col {
    order: 2;
}

/* Image Column */
.hiw-image-col {
    position: relative;
    width: 100%;
}

.hiw-image-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    /* h-[600px] default */
    border-radius: 2.5rem;
    /* rounded-[2.5rem] */
    overflow: hidden;
}

.hiw-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.hiw-image-wrapper.has-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
}

/* Steps Column */
.hiw-steps-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* space-y-2 */
}

/* Step Item */
.hiw-step-item {
    display: flex;
    align-items: center;
    /* items-center */
    position: relative;
}

/* Marker Column (Line) */
.hiw-step-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 2rem;
    /* mr-8 */
    height: 100%;
    min-height: 156px;
    /* Default min-height from ref */
}

.hiw-line-wrapper {
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    /* mb-4 */
}

.hiw-line {
    width: 0.475rem;
    /* w-[0.475rem] */
    border-radius: 9999px;
    /* rounded-full */
    background-color: var(--hiw-gray-200);
    /* default inactive */
    min-height: 100%;
}

/* Active Line Logic */
.hiw-line.active {
    background: linear-gradient(to bottom, var(--hiw-brand-dark) 50%, var(--hiw-gray-200) 50%);
    /* Note: The reference uses 'from-50% to-50%' which implies a hard stop or specific gradient. 
       Adjust based on user control which sets exact gradient. 
       If control is used, inline style overrides this. */
}

/* Content Wrapper */
.hiw-step-content-wrapper {
    display: flex;
    align-items: flex-start;
    /* items-start */
    padding-top: 0.5rem;
    /* pt-2 (implicit align with top of marker?) no, ref has padding on text */
    flex: 1;
}

/* Icon Box */
.hiw-icon-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    /* w-20 */
    height: 5rem;
    /* h-20 */
    border-radius: 1rem;
    /* rounded-2xl */
    margin-right: 1.5rem;
    /* mr-6 */
    transition: background-color 0.3s, color 0.3s;

    /* Default Inactive State */
    background-color: #ffffff;
    border: 1px solid var(--hiw-gray-200);
    /* color: var(--hiw-gray-500); Removed as it doesn't affect images */
    overflow: hidden;
    /* Ensure image stays within radius */
}

.hiw-icon-box img {
    /* Dimensions controlled by Elementor, but defaults here */
    width: 60%;
    height: auto;
    object-fit: contain;
}

.hiw-icon-box i,
.hiw-icon-box svg {
    width: 2rem;
    /* w-8 */
    height: 2rem;
    /* h-8 */
}

/* Active Icon Box */
.hiw-step-item.active .hiw-icon-box {
    background-color: var(--hiw-brand-dark);
    /* color: #ffffff; */
    border-color: transparent;
    box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.2);
    /* shadow-blue-900/20 approx */
}

/* Text */
.hiw-step-text {
    padding-top: 0.5rem;
    /* pt-2 */
}

.hiw-step-title {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    color: var(--hiw-gray-900);
    margin-bottom: 0.5rem;
    /* mb-2 */
    line-height: 1.25;
}

.hiw-step-desc {
    font-size: 1.125rem;
    /* text-lg */
    color: var(--hiw-gray-500);
    line-height: 1.625;
    /* leading-relaxed */
    font-weight: 500;
    /* font-medium */
}

/* Responsiveness for Mobile */
@media (max-width: 767px) {
    .hiw-grid {
        gap: 3rem;
    }

    .hiw-image-wrapper {
        height: 300px;
        /* Smaller height on mobile */
    }

    .hiw-step-item {
        /* On very small screens, maybe stack? Ref keeps them side-by-side */
    }

    .hiw-step-marker {
        margin-right: 1rem;
    }

    .hiw-icon-box {
        width: 4rem;
        height: 4rem;
        margin-right: 1rem;
    }

    .hiw-icon-box i,
    .hiw-icon-box svg {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1.5rem;
    }

    .hiw-step-title {
        font-size: 1.25rem;
    }

    .hiw-step-desc {
        font-size: 1rem;
    }
}