/*

 * Stația de Plată — only the layouts that do not exist in SelfPay Now.

 * All shared visual components come directly from selfpay-now-*.css.

 */



.sps-page .spn-card:hover .spn-card-arrow{

    background: var(--sps-accent-btn) !important;

}



.sps-page{

    font-family:var(--spn-font);

    color:var(--spn-text);

    background:var(--spn-bg-page);

}



/* Hero: SelfPay Now component + station CTA buttons. */

.sps-page .spn-app-hero-inner--no-media{

    grid-template-columns:1fr;

}

.sps-app-hero-actions{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-top:24px;

}



/* Stats reuse the SelfPay Now benefit cards. */

.sps-stats-grid .sps-stat{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:150px;

    border:1px solid var(--spn-card-border,#e5eaf2);

}

.sps-stat-value{

    font-family:var(--spn-font);

    font-size:2.45rem;

    line-height:1;

    font-weight:700;

    color:var(--spn-primary);

    margin-bottom:10px;

}

.sps-stat-suffix{

    color:var(--spn-primary);

}

.sps-stat-label{

    font-size:.9rem;

    line-height:1.35;

    font-weight:600;

    color:var(--spn-text-muted);

    text-align:center;

}




/* Popular services — directly below Hero, before statistics. */

.sps-page .sps-popular-services{
    width:100%;
    padding:26px 0 10px;
    margin:0;
    background:var(--spn-bg-page,#fff);
}

.sps-page .sps-popular-services-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 0 16px;
}

.sps-page .sps-popular-services-head h2{
    margin:0!important;
    padding:0!important;
    font-family:var(--spn-font,inherit)!important;
    font-size:1.35rem!important;
    line-height:1.2!important;
    font-weight:700!important;
    color:var(--spn-primary,#090fab)!important;
}

.sps-page .sps-popular-services-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
}

.sps-page .sps-popular-service-card{
    position:relative!important;
    min-width:0!important;
    min-height:78px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:15px 15px 15px 18px!important;
    margin:0!important;
    border:1px solid var(--spn-card-border,#e5eaf2)!important;
    border-radius:var(--spn-card-radius,14px)!important;
    background:#fff!important;
    color:var(--spn-primary,#090fab)!important;
    text-decoration:none!important;
    box-shadow:0 2px 8px rgba(9,15,171,.04)!important;
    overflow:hidden!important;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease!important;
}

.sps-page .sps-popular-service-card:hover,
.sps-page .sps-popular-service-card:focus{
    transform:translateY(-2px)!important;
    border-color:var(--spn-primary,#090fab)!important;
    background:var(--spn-bg-light,#eaf4fd)!important;
    box-shadow:0 8px 24px rgba(9,15,171,.11)!important;
    color:var(--spn-primary,#090fab)!important;
    text-decoration:none!important;
}

.sps-page .sps-popular-service-title{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-family:var(--spn-font,inherit)!important;
    font-size:1rem!important;
    line-height:1.25!important;
    font-weight:700!important;
    color:var(--spn-primary,#090fab)!important;
    text-decoration:none!important;
}


.sps-page .sps-popular-service-title.spn-desc--desktop{
    display:block!important;
}

.sps-page .sps-popular-service-title.spn-desc--mobile{
    display:none!important;
}


.sps-page .sps-popular-service-arrow{
    position:static!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    flex:0 0 34px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:var(--spn-bg-light,#eaf4fd)!important;
    color:var(--spn-primary,#090fab)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    transition:transform .2s ease,background .2s ease!important;
}

.sps-page .sps-popular-service-arrow > svg{
    display:block!important;
    width:15px!important;
    height:15px!important;
    min-width:15px!important;
    min-height:15px!important;
    max-width:15px!important;
    max-height:15px!important;
    flex:0 0 15px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
}

.sps-page .sps-popular-service-card:hover .sps-popular-service-arrow,
.sps-page .sps-popular-service-card:focus .sps-popular-service-arrow{
    transform:translateX(2px)!important;
    background:var(--sps-accent-btn,var(--spn-accent,#e8cf3d))!important;
}

@media (max-width:991px){
    .sps-page .sps-popular-services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

@media (max-width:575px){
    .sps-page .sps-popular-service-title.spn-desc--desktop{
        display:none!important;
    }

    .sps-page .sps-popular-service-title.spn-desc--mobile{
        display:block!important;
    }

    .sps-page .sps-popular-services{
        padding:20px 0 8px;
    }

    .sps-page .sps-popular-services-head{
        margin-bottom:12px;
    }

    .sps-page .sps-popular-services-head h2{
        font-size:1.15rem!important;
    }

    .sps-page .sps-popular-services-grid{
        grid-template-columns:1fr!important;
        gap:10px!important;
    }

    .sps-page .sps-popular-service-card{
        min-height:66px!important;
        padding:13px 14px 13px 16px!important;
    }

    .sps-page .sps-popular-service-title{
        font-size:.92rem!important;
    }

    .sps-page .sps-popular-service-arrow{
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        max-width:32px!important;
        max-height:32px!important;
        flex-basis:32px!important;
    }

    .sps-page .sps-popular-service-arrow > svg{
        width:14px!important;
        height:14px!important;
        min-width:14px!important;
        min-height:14px!important;
        max-width:14px!important;
        max-height:14px!important;
        flex-basis:14px!important;
    }
}


/* Service ACF still accepts optional image icons and a badge. */

.sps-page .spn-card{

    position:relative;

}

.sps-service-icon img{

    display:block;

    width:24px;

    height:24px;

    object-fit:contain;

}

.sps-service-badge{

    position:absolute;

    top:16px;

    right:16px;

    z-index:5;

    margin:0;

}



/* ACF image icons inside the native SelfPay Now benefit component. */

.sps-page .spn-benefit-icon img{

    display:block;

    width:30px;

    height:30px;

    object-fit:contain;

}







/* Benefits: use the full row when there are only 2 or 3 cards.

 * Four (or more) keep the native SelfPay Now 4-column layout.

 */

@media (min-width:992px){

    .sps-page .spn-benefits-grid.sps-benefits-grid--2{

        grid-template-columns:repeat(2,minmax(0,1fr));

        width:100%;

        margin-left:auto;

        margin-right:auto;

    }



    .sps-page .spn-benefits-grid.sps-benefits-grid--3{

        grid-template-columns:repeat(3,minmax(0,1fr));

        width:100%;

        margin-left:auto;

        margin-right:auto;

    }

}



/* Partners: mockup layout, but entirely on the SelfPay Now design variables. */

.sps-partners{

    background:var(--spn-bg-light);

    padding:72px 0;

    margin:48px 0 80px;

}

.sps-partners-layout{

    display:grid;

    grid-template-columns:minmax(320px,.9fr) minmax(0,1.5fr);

    gap:60px;

    align-items:center;

}

.sps-partners-copy{

    max-width:470px;

}

.sps-partners-copy h2{

    margin:0 0 14px;

    font-family:var(--spn-font);

    font-size:var(--spn-title-size);

    line-height:1.15;

    font-weight:700;

    letter-spacing:var(--spn-title-letter-spacing,normal);

    color:var(--spn-primary);

}

.sps-partners-copy p{

    margin:0;

    font-family:var(--spn-font);

    font-size:var(--spn-section-sub-size);

    line-height:1.6;

    color:var(--spn-text-muted);

}

.sps-partners-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:12px;

    width:100%;

}

.sps-partner{

    min-width:0;

    min-height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px 12px;

    border:1px solid var(--spn-card-border);

    border-radius:var(--spn-card-radius);

    background:var(--card-bg);

    color:var(--spn-text)!important;

    text-decoration:none!important;

    box-shadow:var(--shadow-sm);

    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;

}

.sps-partner[href]:hover{

    transform:translateY(-2px);

    border-color:var(--spn-primary);

    background:var(--spn-bg-page);

    box-shadow:var(--shadow-md);

}

.sps-partner img{

    display:block;

    max-width:135px;

    max-height:48px;

    width:auto;

    height:auto;

    object-fit:contain;

}

.sps-partner-name{

    font-family:var(--spn-font);

    font-size:1rem;

    line-height:1.15;

    font-weight:700;

    color:var(--spn-primary);

    text-align:center;

}



/* Network: reuse the exact blue SelfPay Now CTA card. */

.sps-network-card{

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);

    gap:52px;

    align-items:start;

    text-align:left;

}

.sps-network-copy{

    min-width:0;

    align-self:start;

}

.sps-network-eyebrow{

    display:inline-flex;

    width:max-content;

    max-width:100%;

    align-self:flex-start;

    align-items:center;

    padding:6px 13px;

    margin-bottom:16px;

    border:1px solid rgba(255,255,255,.22);

    border-radius:999px;

    background:rgba(255,255,255,.10);

    color:var(--sps-accent-btn);

    font-size:.75rem;

    line-height:1;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.sps-network-card h2{

    text-align:left;

}

.sps-network-card p{

    max-width:680px;

}

.sps-network-stats{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

    margin:-4px 0 28px;

}

.sps-network-stat-value{

    color:var(--sps-accent-btn);

    font-size:1.7rem;

    line-height:1;

    font-weight:700;

}

.sps-network-stat-label{

    margin-top:6px;

    color:rgba(255,255,255,.72);

    font-size:.78rem;

    font-weight:600;

}

.sps-network-btn{

    display:inline-flex!important;

    align-items:center;

    justify-content:center;

    gap:11px;

    width:auto;

    min-height:50px;

    padding:12px 20px 12px 22px!important;

    border:1px solid var(--sps-accent-btn)!important;

    border-radius:12px!important;

    background:var(--sps-accent-btn)!important;

    color:var(--spn-primary)!important;

    font-family:var(--spn-font);

    font-weight:700!important;

    line-height:1;

    text-decoration:none!important;

    box-shadow:0 10px 24px rgba(0,0,0,.12);

    transition:

        transform .2s ease,

        box-shadow .2s ease,

        background .2s ease,

        border-color .2s ease;

}

.sps-network-btn:hover,

.sps-network-btn:focus{

    background:#fff!important;

    border-color:#fff!important;

    color:var(--spn-primary)!important;

    transform:translateY(-2px);

    box-shadow:0 14px 30px rgba(0,0,0,.16);

    text-decoration:none!important;

}

.sps-network-btn svg{

    width:18px;

    height:18px;

    box-sizing:content-box;

    padding:5px;

    border-radius:50%;

    background:rgba(9,15,171,.09);

    transition:transform .2s ease,background .2s ease;

}

.sps-network-btn:hover svg,

.sps-network-btn:focus svg{

    transform:translateX(3px);

    background:rgba(9,15,171,.13);

}

.sps-network-media{

    min-width:0;

    display:flex;

    align-items:center;

    justify-content:center;

}

.sps-network-media picture,

.sps-network-media img{

    display:block;

    width:100%;

}

.sps-network-media img{

    max-height:420px;

    object-fit:contain;

}



.sps-network-map{

    position:relative;

    min-height:430px;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(255,255,255,.18);

    box-shadow:0 18px 50px rgba(0,0,0,.10);

}

.sps-network-map > *{

    width:100%!important;

    max-width:100%!important;

}

.sps-network-map iframe{

    display:block;

    width:100%!important;

    height:430px!important;

    min-height:430px;

    border:0;

}

.sps-network-map .leaflet-container,

.sps-network-map .mapboxgl-map,

.sps-network-map [class*="map-container"],

.sps-network-map [id*="map"]{

    width:100%!important;

    min-height:430px!important;

}



/* Shared promotion button: keep inline arrow tidy. */

.spn-promotii-footer .btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    width:auto!important;
    min-height:0!important;
}

.spn-promotii-footer .btn svg{
    display:block!important;
    width:14px!important;
    height:14px!important;
    min-width:14px!important;
    min-height:14px!important;
    max-width:14px!important;
    max-height:14px!important;
    flex:0 0 14px!important;
    margin:0!important;
    padding:0!important;
    vertical-align:middle;
}







/* Network desktop: align content vertically with the 430px live map.

 * Keep the existing left/right column sizes untouched.

 * Intro stays at the top; stats + CTA sit toward the bottom.

 */

@media (min-width:992px){

    .sps-network-copy{

        display:flex;

        flex-direction:column;

        min-height:430px;

    }



    .sps-network-stats{

        margin-top:auto;

        margin-bottom:18px;

    }



    .sps-network-btn{

        align-self:flex-start;

    }

}



@media (max-width:991px){

    .sps-partners-layout{
        grid-template-columns:1fr;
        gap:28px;
    }

    .sps-partners-copy{
        max-width:none;
        text-align:center;
    }

    .sps-partners-copy h2,
    .sps-partners-copy p{
        text-align:center;
    }

    .sps-partners-grid{
        width:100%;
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .sps-network-card{

        grid-template-columns:1fr;

        gap:30px;

        text-align:center;

    }



    .sps-network-copy{

        display:block;

        min-height:0;

    }

    .sps-network-card h2{

        text-align:center;

    }

    .sps-network-card p{

        margin-left:auto!important;

        margin-right:auto!important;

    }

    .sps-network-stats{

        justify-content:center;

    }

    .sps-network-media{

        order:-1;

    }

    .sps-network-media img{

        max-height:300px;

    }

}



@media (max-width:575px){

    .sps-app-hero-actions{

        justify-content:center;

        gap:10px;

        margin-top:18px;

    }

    .sps-app-hero-actions .btn-contact{

        padding:11px 18px!important;

    }

    .sps-stat-value{

        font-size:1.85rem;

    }

    .sps-stat-label{

        font-size:.78rem;

    }

    .sps-stats-grid .sps-stat{

        min-height:125px;

        padding:22px 8px!important;

    }

    .sps-service-badge{

        top:12px;

        right:12px;

    }

    .sps-partners{

        padding:40px 0;

        margin:28px 0 44px;

    }

    .sps-partners-layout{
        gap:22px;
    }

    .sps-partners-copy h2{
        font-size:var(--spn-mobile-title-size);
        margin-bottom:8px;
    }

    .sps-partners-copy p{
        font-size:var(--spn-mobile-section-sub-size);
        max-width:320px;
        margin-left:auto;
        margin-right:auto;
    }

    .sps-partners-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .sps-partner{
        min-width:0;
        min-height:76px;
        padding:14px 10px;
    }

    .sps-partner img{
        max-width:100%;
        width:auto;
        max-height:40px;
    }

    .sps-partner-name{
        font-size:.86rem;
        line-height:1.15;
        overflow-wrap:anywhere;
    }

    .sps-network-card{

        padding:36px 24px!important;

    }

    .sps-network-stats{

        gap:18px;

        margin-bottom:22px;

    }

    .sps-network-stat-value{

        font-size:1.4rem;

    }

    .sps-network-media img{

        max-height:220px;

    }

    .sps-network-map,

    .sps-network-map iframe,

    .sps-network-map .leaflet-container,

    .sps-network-map .mapboxgl-map,

    .sps-network-map [class*="map-container"],

    .sps-network-map [id*="map"]{

        min-height:300px!important;

        height:300px!important;

    }

}



/* Live SelfPay map embedded in the Network section. */

.sps-live-map{

    position:relative;

    width:100%;

    height:430px;

    min-height:430px;

    overflow:hidden;

    background:#eef2f8;

}

.sps-live-map__canvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    min-height:430px;

}

.sps-live-map__toolbar{

    position:absolute;

    z-index:5;

    top:16px;

    left:16px;

    right:16px;

    display:flex;

    align-items:flex-start;

    gap:8px;

    pointer-events:none;

}

.sps-live-map__search-wrap{

    position:relative;

    flex:1 1 auto;

    min-width:0;

    pointer-events:auto;

}

.sps-live-map__search{

    width:100%;

    height:46px;

    padding:0 15px;

    border:1px solid rgba(9,15,171,.12);

    border-radius:12px;

    background:rgba(255,255,255,.97);

    color:var(--spn-text);

    font-family:var(--spn-font);

    font-size:.9rem;

    outline:none;

    box-shadow:0 8px 24px rgba(15,25,80,.12);

}

.sps-live-map__search:focus{

    border-color:var(--spn-primary);

    box-shadow:0 8px 24px rgba(15,25,80,.12),0 0 0 3px rgba(9,15,171,.08);

}

.sps-live-map__message{

    position:absolute;

    top:calc(100% + 7px);

    left:0;

    max-width:100%;

    padding:7px 10px;

    border-radius:8px;

    background:#fff;

    color:var(--spn-text-muted);

    font-size:.75rem;

    line-height:1.3;

    box-shadow:0 6px 18px rgba(15,25,80,.12);

}

.sps-live-map__action{

    width:46px;

    height:46px;

    flex:0 0 46px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:0;

    border-radius:12px;

    background:var(--spn-primary);

    color:#fff;

    cursor:pointer;

    box-shadow:0 8px 24px rgba(15,25,80,.16);

    pointer-events:auto;

    transition:transform .2s ease,background .2s ease;

}

.sps-live-map__action:hover,

.sps-live-map__action:focus{

    background:var(--spn-primary-dark,#060980);

    transform:translateY(-1px);

}

.sps-live-map__action svg{

    width:20px;

    height:20px;

}

.sps-live-map__error{

    position:absolute;

    z-index:6;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    padding:10px 14px;

    border-radius:10px;

    background:#fff;

    color:var(--spn-text);

    font-size:.85rem;

    box-shadow:0 8px 24px rgba(15,25,80,.12);

}

.sps-map-infobox{

    min-width:180px;

    max-width:260px;

    color:#1a1d3a;

    font-family:var(--spn-font,inherit);

    font-size:13px;

    line-height:1.45;

}

.sps-map-infobox strong{

    display:block;

    margin-bottom:5px;

    font-size:14px;

    color:#090fab;

}

.sps-map-infobox__directions{

    margin-top:9px;

    padding:0;

    border:0;

    background:transparent;

    color:#090fab;

    font:inherit;

    font-weight:700;

    cursor:pointer;

}



@media(max-width:575px){

    .sps-network-map,

    .sps-live-map,

    .sps-live-map__canvas{

        height:340px!important;

        min-height:340px!important;

    }

    .sps-live-map__toolbar{

        top:10px;

        left:10px;

        right:10px;

        gap:6px;

    }

    .sps-live-map__search,

    .sps-live-map__action{

        height:42px;

    }

    .sps-live-map__action{

        width:42px;

        flex-basis:42px;

        border-radius:10px;

    }

    .sps-live-map__search{

        padding:0 12px;

        border-radius:10px;

        font-size:.82rem;

    }

}