/* SP4 Framework v0.2.1 – Portal navigation + Back to top */
.sp4-back-to-top{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:9995;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:46px;
    min-height:46px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:var(--sp4-primary,#809f6f);
    color:#fff;
    font:inherit;
    font-size:13px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(20,31,26,.20);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease;
}
.sp4-back-to-top:hover,
.sp4-back-to-top:focus-visible{
    background:var(--sp4-primary-dark,#5e7652);
    color:#fff;
}
.sp4-back-to-top:focus-visible{
    outline:3px solid rgba(var(--sp4-primary-rgb,128,159,111),.25);
    outline-offset:3px;
}
.sp4-back-to-top.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.sp4-back-to-top>span:first-child{
    font-size:20px;
    line-height:1;
}
.sp4-portal-menu-list{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}
.sp4-portal-menu-list a{
    text-decoration:none;
}
@media(max-width:782px){
    .sp4-back-to-top{
        right:14px;
        bottom:14px;
        width:46px;
        min-width:46px;
        padding:0;
        justify-content:center;
    }
    .sp4-back-to-top-label{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0;
    }
}
@media(prefers-reduced-motion:reduce){
    .sp4-back-to-top{transition:none}
}


/* ================================================================
   v0.2.2 – Frontend portal pages & shortcodes
   ================================================================ */
.sp4-framework-portal-page .site-main,
.sp4-framework-portal-page main{
    min-height:60vh
}
.sp4-frontend-login,
.sp4-frontend-portal-card,
.sp4-customer-dashboard{
    width:min(100%,620px);
    margin:36px auto;
    padding:24px;
    border:1px solid rgba(23,32,51,.10);
    border-radius:18px;
    background:#fff;
    color:#172033;
    box-shadow:0 16px 42px rgba(26,39,64,.09)
}
.sp4-frontend-login-head{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:20px
}
.sp4-frontend-login-head>span,
.sp4-frontend-portal-mark,
.sp4-portal-choice-mark{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:12px;
    background:#17233b;
    color:#fff;
    font-size:13px;
    font-weight:900
}
.sp4-frontend-login-head small,
.sp4-customer-dashboard-head small{
    color:#667085;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.09em
}
.sp4-frontend-login-head h2,
.sp4-frontend-portal-card h2,
.sp4-customer-dashboard h2{
    margin:2px 0 0;
    color:#172033
}
.sp4-frontend-login form p{
    margin:0 0 13px
}
.sp4-frontend-login label{
    display:block;
    margin-bottom:5px;
    color:#344054;
    font-weight:750
}
.sp4-frontend-login input[type=text],
.sp4-frontend-login input[type=password]{
    width:100%;
    min-height:44px;
    padding:8px 11px;
    border:1px solid #cfd8e5;
    border-radius:10px;
    background:#fff
}
.sp4-frontend-login input[type=submit],
.sp4-frontend-portal-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 15px;
    border:0;
    border-radius:10px;
    background:#2563eb;
    color:#fff!important;
    text-decoration:none;
    font-weight:800;
    cursor:pointer
}
.sp4-frontend-login input[type=submit]:hover,
.sp4-frontend-portal-button:hover{
    background:#1d4ed8;
    color:#fff!important
}
.sp4-frontend-login-links{
    margin-top:12px;
    font-size:12px
}
.sp4-frontend-login-links a{color:#2563eb}
.sp4-frontend-portal-card{
    display:flex;
    gap:15px;
    align-items:flex-start
}
.sp4-frontend-portal-card p{
    margin:7px 0 14px;
    color:#667085;
    line-height:1.55
}
.sp4-frontend-portal-card.is-danger{
    border-color:#efcaca;
    background:#fffafa
}
.sp4-frontend-portal-card.is-warning{
    border-color:#edd9a7;
    background:#fffdf7
}
.sp4-frontend-portal-card.is-success{
    border-color:#c5e4d0;
    background:#fbfffc
}
.sp4-customer-dashboard{
    width:min(100%,900px)
}
.sp4-customer-dashboard-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px
}
.sp4-customer-dashboard-head p{
    color:#667085;
    max-width:650px
}
.sp4-customer-placeholder{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:18px;
    padding:14px;
    border-radius:12px;
    background:#edf9f2;
    color:#166b41
}
.sp4-customer-placeholder>span{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#168a52;
    color:#fff;
    font-weight:900
}
.sp4-customer-placeholder p{margin:3px 0 0;color:#39765a}
.sp4-portal-choice-grid{
    width:min(100%,950px);
    margin:36px auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px
}
.sp4-portal-choice-card{
    padding:20px;
    border:1px solid rgba(23,32,51,.10);
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 28px rgba(26,39,64,.06)
}
.sp4-portal-choice-card h3{margin:12px 0 14px}
@media(max-width:720px){
    .sp4-portal-choice-grid{grid-template-columns:1fr}
    .sp4-customer-dashboard-head{flex-direction:column}
    .sp4-frontend-login,
    .sp4-frontend-portal-card,
    .sp4-customer-dashboard{margin:22px auto;padding:18px}
}