.smpih-timeline{
    /* Line */
    --smpih-line-color:#DDE1D8;
    /* Dot Normal */
    --smpih-dot-color:#16326B;
    --smpih-dot-border-color:#E9EEF6;
    /* Dot Highlight */
    --smpih-dot-highlight-color:#B5842A;
    --smpih-dot-highlight-border-color:#F6EEDC;
    /* Card Normal */
    --smpih-card-bg:#FFFFFF;
    --smpih-card-border-color:#DDE1D8;
    --smpih-card-text-color:#16213A;
    /* Card Highlight */
    --smpih-card-highlight-bg:#F6EEDC;
    --smpih-card-highlight-border-color:#B5842A;
    --smpih-card-highlight-text-color:#0E2247;
    /* Time Text */
    --smpih-time-text-color:#0E2247;
    /* Fonts */
    --smpih-font-display:"Fraunces", Georgia, serif;
    --smpih-font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    /* Spacing */
    --smpih-column-gap: 12px;
    --smpih-row-padding-top-bottom: 11px;
    --smpih-time-padding-top: 8px;
    --smpih-dot-col-padding-top: 8px;
    /* Mobile Spacing */
    --smpih-mobile-column-gap: 12px;
    --smpih-mobile-row-padding-top-bottom: 11px;
    --smpih-mobile-time-padding-bottom: 4px;
    --smpih-mobile-dot-col-padding-top: 10px;
    /* Container Padding */
    --smpih-container-padding-left: 0px;
    --smpih-container-padding-right: 0px;
    --smpih-container-padding-top: 0px;
    --smpih-container-padding-bottom: 0px;

    max-width:640px;
    margin:0 auto;
    padding: var(--smpih-container-padding-top) var(--smpih-container-padding-right) var(--smpih-container-padding-bottom) var(--smpih-container-padding-left);
    font-family:var(--smpih-font-body);
    box-sizing:border-box;
}
.smpih-timeline *{box-sizing:border-box;}

.smpih-timeline .smpih-list{
    position:relative;
}
.smpih-timeline .smpih-list::before{
    content:"";
    position:absolute;
    left: calc(96px + 12px + 12px); /* time column + gap + half of dot column (24/2) */
    top:0;
    bottom:0;
    width:2px;
    background:var(--smpih-line-color);
    transform: translateX(-50%);
}

.smpih-timeline .smpih-row{
    display:grid;
    grid-template-columns:96px 24px 1fr;
    align-items:flex-start;
    column-gap: var(--smpih-column-gap);
    padding: var(--smpih-row-padding-top-bottom) 0;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .5s ease, transform .5s ease;
}
.smpih-timeline .smpih-row.smpih-in-view{
    opacity:1;
    transform:translateY(0);
}

.smpih-timeline .smpih-time{
    font-family:var(--smpih-font-display);
    font-weight:600;
    font-size:14.5px;
    color:var(--smpih-time-text-color);
    text-align:right;
    padding-top: var(--smpih-time-padding-top); /* align vertically with dot */
    white-space:nowrap;
}

.smpih-timeline .smpih-dot-col{
    display:flex;
    justify-content:center;
    align-items:center;
    padding-top: var(--smpih-dot-col-padding-top);
    position: relative;
    z-index: 10;
}
.smpih-timeline .smpih-dot{
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--smpih-dot-color);
    border:3px solid var(--smpih-dot-border-color);
    box-sizing: content-box; /* so border doesn't affect dimensions */
    position: relative;
    z-index: 11;
}
.smpih-timeline .smpih-row.smpih-highlight .smpih-dot{
    background:var(--smpih-dot-highlight-color);
    border-color:var(--smpih-dot-highlight-border-color);
}

.smpih-timeline .smpih-card{
    background:var(--smpih-card-bg);
    border:1px solid var(--smpih-card-border-color);
    border-radius:12px;
    padding:11px 16px;
    font-size:14.5px;
    font-weight:600;
    color:var(--smpih-card-text-color);
}
.smpih-timeline .smpih-row.smpih-highlight .smpih-card{
    border-color:var(--smpih-card-highlight-border-color);
    background:var(--smpih-card-highlight-bg);
    color:var(--smpih-card-highlight-text-color);
}

@media (max-width:480px){
    .smpih-timeline .smpih-list::before{
        left: 24px; /* center line on 48px dot column (48/2 = 24) */
    }
    .smpih-timeline .smpih-row{
        grid-template-columns: 48px 1fr; /* dot column, then content column */
        grid-template-rows: auto auto;
        column-gap: var(--smpih-mobile-column-gap);
        padding: var(--smpih-mobile-row-padding-top-bottom) 0;
    }
    .smpih-timeline .smpih-time{
        white-space: normal;
        text-align: left; /* change text alignment */
        padding-top:0;
        padding-bottom: var(--smpih-mobile-time-padding-bottom);
        grid-column: 2;
        grid-row: 1;
    }
    .smpih-timeline .smpih-dot-col{
        grid-column: 1;
        grid-row: 1 / span 2; /* dot spans both rows */
        padding-top: var(--smpih-mobile-dot-col-padding-top);
    }
    .smpih-timeline .smpih-card{
        grid-column: 2;
        grid-row: 2;
    }
}

@media (prefers-reduced-motion:reduce){
    .smpih-timeline .smpih-row{opacity:1;transform:none;transition:none;}
}

/* Make timeline items visible in ALL Elementor editor contexts */
.elementor-editor-active .smpih-timeline .smpih-row,
.elementor-edit-mode .smpih-timeline .smpih-row,
.elementor-preview .smpih-timeline .smpih-row,
#elementor-preview .smpih-timeline .smpih-row,
.elementor-widget-container .smpih-timeline .smpih-row,
.elementor-widget-digimensi-timeline .smpih-timeline .smpih-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}