/**
 * WP Rentalo Lite – shared booking step navigation.
 *
 * Canonical geometry and typography for Step 2, Step 3 and Step 4.
 * Interactive states may change colors, borders, shadows and outlines only.
 */

/* 2.15.533 - Canonical booking step navigation for Step 2, Step 3 and Step 4. */
.rentalo-frontend-wrap .rentalo-progress-nav{
    width:100%;
    margin:0 0 22px;
    padding:0;
    color:var(--rentalo-step-inactive-text,#5d6f84);
}
.rentalo-frontend-wrap .rentalo-progress-list{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    border-radius:20px;
    overflow:hidden;
    background:transparent;
}
.rentalo-frontend-wrap .rentalo-progress-item{
    position:relative;
    min-width:0;
    margin:0;
    padding:0;
    background:var(--rentalo-step-inactive-bg,#edf2f7);
    color:var(--rentalo-step-inactive-text,#6b7a8b);
    clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
}
.rentalo-frontend-wrap .rentalo-progress-item:first-child{
    clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
}
.rentalo-frontend-wrap .rentalo-progress-item:last-child{
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%);
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
}
.rentalo-frontend-wrap .rentalo-progress-item + .rentalo-progress-item{
    margin-left:-14px;
}
.rentalo-frontend-wrap .rentalo-progress-item.is-active{
    z-index:4;
    background:var(--rentalo-step-active-bg,#c20000);
    color:var(--rentalo-step-active-text,#fff);
}
.rentalo-frontend-wrap .rentalo-progress-link,
.rentalo-frontend-wrap .rentalo-progress-current{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:40px;
    padding:0 22px;
    color:inherit;
    text-decoration:none;
    font-size:var(--rentalo-step-navigation-font-size,16px);
    font-weight:var(--rentalo-step-navigation-font-weight,700);
    line-height:var(--rentalo-step-navigation-line-height,1.2);
    white-space:nowrap;
    box-sizing:border-box;
}
.rentalo-frontend-wrap .rentalo-progress-link:hover,
.rentalo-frontend-wrap .rentalo-progress-link:focus{
    color:inherit;
    text-decoration:none;
}
.rentalo-frontend-wrap .rentalo-progress-link:focus-visible{
    outline:2px solid currentColor;
    outline-offset:-4px;
}
.rentalo-frontend-wrap .rentalo-progress-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:28px;
    height:28px;
    border-radius:999px;
    background:rgba(255,255,255,.58);
    color:var(--rentalo-step-badge-text,#607184);
    font-size:13px;
    font-weight:800;
    box-shadow:none;
}
.rentalo-frontend-wrap .rentalo-progress-item.is-active .rentalo-progress-badge{
    background:var(--rentalo-step-active-text,#fff);
    color:var(--rentalo-step-active-bg,#c20000);
}
.rentalo-frontend-wrap .rentalo-progress-label{
    display:inline-block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
}
@media (max-width:767px){
    .rentalo-frontend-wrap .rentalo-progress-nav{
        margin:0 0 18px;
        padding:0 4px;
    }
    .rentalo-frontend-wrap .rentalo-progress-list{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:0;
        overflow:visible;
        border-radius:0;
        background:transparent;
    }
    .rentalo-frontend-wrap .rentalo-progress-item,
    .rentalo-frontend-wrap .rentalo-progress-item:first-child,
    .rentalo-frontend-wrap .rentalo-progress-item:last-child{
        flex:1 1 0;
        display:flex;
        justify-content:center;
        background:transparent;
        color:var(--rentalo-step-inactive-text,#6b7a8b);
        clip-path:none;
        border-radius:0;
        margin:0;
        z-index:auto;
    }
    .rentalo-frontend-wrap .rentalo-progress-item + .rentalo-progress-item{
        margin-left:0;
    }
    .rentalo-frontend-wrap .rentalo-progress-item::before{
        content:"";
        position:absolute;
        top:13px;
        left:0;
        right:50%;
        height:1px;
        background:var(--rentalo-border,#d8e0ea);
        z-index:0;
    }
    .rentalo-frontend-wrap .rentalo-progress-item::after{
        content:"";
        position:absolute;
        top:13px;
        left:50%;
        right:0;
        height:1px;
        background:var(--rentalo-border,#d8e0ea);
        z-index:0;
    }
    .rentalo-frontend-wrap .rentalo-progress-item:first-child::before,
    .rentalo-frontend-wrap .rentalo-progress-item:last-child::after{
        display:none;
    }
    .rentalo-frontend-wrap .rentalo-progress-link,
    .rentalo-frontend-wrap .rentalo-progress-current{
        position:relative;
        z-index:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:6px;
        min-height:48px;
        padding:0 2px;
        font-size:var(--rentalo-step-navigation-mobile-font-size,11px);
        font-weight:var(--rentalo-step-navigation-font-weight,700);
        text-align:center;
        white-space:normal;
    }
    .rentalo-frontend-wrap .rentalo-progress-badge{
        width:26px;
        height:26px;
        background:var(--rentalo-step-inactive-bg,#edf2f7);
        color:var(--rentalo-step-inactive-text,#6b7a8b);
        font-size:12px;
    }
    .rentalo-frontend-wrap .rentalo-progress-item.is-active{
        background:transparent;
        color:var(--rentalo-step-active-bg,#c20000);
    }
    .rentalo-frontend-wrap .rentalo-progress-item.is-active .rentalo-progress-badge{
        background:var(--rentalo-step-active-bg,#c20000);
        color:var(--rentalo-step-active-text,#fff);
    }
}