/* =========================
   SYSTEM WIDGET
========================= */

.dp-system-widget{
    font-family: "Rubik";
}

.dp-system-widget .steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    align-items:stretch;
}

/* CARD */
.dp-system-widget .step{
    display:flex;
    flex-direction:column;
    height:100%;
}

.dp-system-widget .step > a{
    display:flex;
    flex-direction:column;
    height:100%;
    text-decoration:none;
}

/* HEADER */
.dp-system-widget .step-header{
    color:#fff;
    padding:15px 30px 15px 50px;
    display:flex;
    align-items:center;
    gap:12px;
    clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%,6% 50%);
    min-height:70px;
}

.step-1 .step-header{
    clip-path:polygon(
        0 0,
        94% 0,
        100% 50%,
        94% 100%,
        0 100%
    );
    padding:15px 30px;
}
.dp-system-widget .step-body{
    margin-top:-1px;
}
.dp-system-widget .step-footer{
    border-radius: 0px 0px 0px 8px;
}


.step-header h3{
    font-size:18px;
    font-weight:700;
    margin:0;
    line-height:1.3;
}

/* NUMBER */
.dp-system-widget .number{
    width:30px;
    min-width:30px;
    height:30px;
    border-radius:50%;
    background:rgba(255,255,255,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    box-shadow:0 3px 41px 0 #ffffff;
}

/* BODY */
.dp-system-widget .step-body{
    background:#ECF1FC;
    display:flex;
    flex-direction:column;
    flex:1;
    margin-right:20px;
}

.dp-system-widget .content-inner{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:18px;
    height:100%;
}

/* REMOVE FIXED HEIGHTS */
.dp-system-widget .highlight{
    font-weight:bold;
    font-size:18px;
    margin:0;
    color:#013248;
    line-height:1.5;
}

.dp-system-widget .highlight-desc{
    font-size:16px;
    margin:0;
    color:#013248;
    line-height:1.6;
}

/* PUSH LIST TO BOTTOM */
.dp-system-widget ul{
    list-style:none;
    padding-left:0;
    margin:0;
    margin-top:auto;
}

.dp-system-widget ul li{
    position:relative;
    padding-left:28px;
    margin-bottom:10px;
    font-size:14px;
    color:#013248;
    line-height:1.5;
}

.step{
    --step-color:#589BFA;
}

/* CUSTOM BULLETS */
.step-body ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:2px;
    width:19px;
    height:19px;
    background-color:var(--step-color);

    -webkit-mask-image:url('https://www.digitalparc.com/wp-content/uploads/2026/04/bullet_list.svg');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;

    mask-image:url('https://www.digitalparc.com/wp-content/uploads/2026/04/bullet_list.svg');
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
}

/* FOOTER */
.dp-system-widget .step-footer{
    margin-top:auto;
    margin-right:20px;
    padding:20px;
    font-weight:bold;
    background:#DBE6F8;
    transition:0.3s ease;
}

.step-footer span{
    font-size:14px;
    display:flex;
    align-items:center;
    gap:12px;
}

.step-footer img{
    width:16px;
    height:10px;
}

/* HOVER */
.dp-system-widget .step:hover .step-footer{
    background:var(--step-color);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

img.hoverIcon{
    display:none;
}

.dp-system-widget .step:hover .hoverIcon{
    display:block;
}

.dp-system-widget .step:hover .normalIcon{
    display:none;
}

/* =========================
   RESPONSIVE
========================= */

/* LARGE TABLET */
@media (max-width: 1024px){

    .dp-system-widget .steps{
        grid-template-columns:repeat(2,1fr);
    }

    .dp-system-widget .step-header{
        padding:16px 24px;
        clip-path: polygon(0 0,96% 0,100% 50%,96% 100%,0 100%,4% 50%);
    }

    .dp-system-widget .step-body,
    .dp-system-widget .step-footer{
        margin-right:0;
    }
	
    .dp-system-widget .content-inner{
        padding:30px 24px;
    }

    .dp-system-widget .step-body,
    .dp-system-widget .step-footer{
        margin-right:0;
		width: 96%;
    }
}

/* MOBILE */
@media (max-width: 767px){

    .dp-system-widget .steps{
        grid-template-columns:1fr;
    }

    .step-header h3{
        font-size:16px;
    }

    .dp-system-widget .highlight{
        font-size:17px;
    }

    .dp-system-widget .highlight-desc{
        font-size:15px;
    }

    .dp-system-widget .content-inner{
        padding:24px 18px;
    }

    .dp-system-widget .step-header{
        min-height:72px;
        padding:14px 18px;
		clip-path: polygon(0 0,97% 0,100% 50%,97% 100%,0 100%,3% 50%);

    }
	
	 .dp-system-widget .step-header h3{
        font-size:16px;
        line-height:1.4;
    }

    .dp-system-widget .number{
        width:34px;
        height:34px;
        min-width:34px;
    }
	 .dp-system-widget .step-body{
        margin-right:0;
		 width: 97%;
    }
	 .dp-system-widget .step-footer{
        margin-right:0;
        padding:18px;
		width: 97%;
    }
}

/* =========================
   EQUAL HEIGHT CONTENT
========================= */

/* Entire card equal height */
.dp-system-widget .step{
    display:flex;
    flex-direction:column;
    height:100%;
}

.dp-system-widget .step > a{
    display:flex;
    flex-direction:column;
    height:100%;
}

/* BODY */
.dp-system-widget .step-body{
    flex:1;
    display:flex;
}

/* CONTENT LAYOUT */
.dp-system-widget .content-inner{
    display:grid;
    grid-template-rows:
        auto   /* highlight */
        auto   /* desc */
        1fr;   /* ul */
    width:100%;
    height:100%;
    gap:20px;
}