/* =========================================================
   PA BUNTOK 2.0
   INFO LAYANAN & STATISTIK
========================================================= */

.pa-info-service{

    background:#F6F8FA;

    border-radius:24px;

    padding:30px 0 45px;

    margin-top:70px;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.pa-info-header{

    max-width:700px;

    margin:0 auto 32px;

    text-align:center;

}


.pa-info-label{

    display:inline-flex !important;

    width:auto !important;
    max-width:max-content !important;

    align-items:center;
    justify-content:center;

    gap:8px;

    margin:0 auto;

    padding:8px 18px;

    background:#EAF7EE !important;

    border-radius:50px;

    color:#0B7A3B;

    font-size:14px;
    font-weight:600;

    box-sizing:border-box;

}


.pa-info-header h2{

    margin:16px 0 12px;

    color:#1E293B;

    font-size:30px;
    line-height:1.2;
    font-weight:700;

}


.pa-info-header p{

    margin:0;

    color:#64748B;

    line-height:1.7;

}


/* =========================================================
   GRID
========================================================= */

.pa-info-grid{

    max-width:950px;

    margin:0 auto;

    display:grid;

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

    gap:28px;

}


/* =========================================================
   MAIN CARDS
========================================================= */

.pa-service-card,
.pa-visitor-card{

    background:#FFFFFF;

    border-radius:24px;

    padding:32px;

    box-shadow:
        0 15px 40px rgba(15,23,42,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.pa-service-card:hover,
.pa-visitor-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 45px rgba(15,23,42,.10);

}


/* =========================================================
   CARD HEADING
========================================================= */

.card-heading{

    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:14px;

    padding-bottom:18px;

    margin-bottom:24px;

}


.card-heading::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:72px;
    height:4px;

    transform:translateX(-50%);

    border-radius:999px;

    background:#0B7A3B;

}


.pa-icon{

    width:52px;
    height:52px;

    flex:0 0 52px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:0;

    border-radius:50%;

    background:#EAF7EE;

    color:#0B7A3B;

    font-size:20px;

}


.card-title h3{

    margin:0;

    color:#1E293B;

    font-size:22px;
    line-height:1.25;
    font-weight:700;

}


/* =========================================================
   JAM LAYANAN
========================================================= */

.service-box{

    margin-bottom:16px;

    padding:18px 20px;

    background:#F8FAFC;

    border:1px solid #EEF2F7;

    border-radius:16px;

    text-align:center;

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

}


.service-box:hover{

    transform:translateY(-2px);

    border-color:#DDEBE2;

    box-shadow:
        0 10px 24px rgba(15,23,42,.05);

}


.service-day{

    display:block;

    margin-bottom:8px;

    color:#64748B;

    font-size:14px;
    font-weight:600;

}


.service-hour{

    margin:6px 0 10px;

    color:#1E293B;

    font-size:22px;
    line-height:1.2;
    font-weight:700;

}


.service-break{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    color:#64748B;

    font-size:13px;
    line-height:1.5;

}


.service-break i{

    color:#94A3B8;

    font-size:11px;

}


.service-break strong{

    color:#64748B;

    font-weight:600;

}


/* =========================================================
   HARI LIBUR
========================================================= */

.holiday-box{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:2px;

    padding:17px 18px;

    background:#FFF9F9;

    border:1px solid #F2DADA;

    border-radius:16px;

}


.holiday-box > i{

    flex:0 0 36px;

    width:36px;
    height:36px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#FFF0F0;

    color:#C65A5A;

    font-size:16px;

}


.holiday-box div{

    display:flex;

    flex-direction:column;

    gap:3px;

}


.holiday-box strong{

    color:#334155;

    font-size:14px;
    font-weight:700;

}


.holiday-box span{

    color:#64748B;

    font-size:13px;
    line-height:1.5;

}


/* =========================================================
   STATISTIK PENGUNJUNG
========================================================= */

.visitor-grid{

    display:grid;

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

    gap:16px;

}


.visitor-grid > div{

    padding:18px 16px;

    background:#F8FAFC;

    border:1px solid #EDF2F7;

    border-radius:16px;

    text-align:center;

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

}


.visitor-grid > div:hover{

    transform:translateY(-3px);

    border-color:#D8E8DD;

    box-shadow:
        0 10px 24px rgba(15,23,42,.06);

}


.visitor-grid strong{

    display:block;

    margin:0 0 7px;

    color:#0B7A3B;

    font-size:30px;
    line-height:1;
    font-weight:700;

}


.visitor-grid span{

    display:block;

    color:#64748B;

    font-size:13px;
    line-height:1.3;
    font-weight:500;

}


/* =========================================================
   ONLINE STATUS
========================================================= */

.online-status{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    margin-top:20px;

    padding:14px 18px;

    background:#EAF7EE;

    border-radius:14px;

    color:#0B7A3B;

    font-size:14px;
    line-height:1;
    font-weight:600;

}


.online-dot{

    width:9px;
    height:9px;

    flex:0 0 9px;

    border-radius:50%;

    background:#55C271;

    animation:onlinePulse 2s infinite;

}


.online-status strong{

    font-weight:700;

}


/* =========================================================
   CATATAN STATISTIK
========================================================= */

.visitor-note{

    display:flex;

    align-items:flex-start;

    gap:9px;

    margin-top:18px;

    padding:0 4px;

    color:#94A3B8;

    font-size:12px;

    line-height:1.5;

}


.visitor-note i{

    flex:0 0 auto;

    margin-top:2px;

    color:#0B7A3B;

    font-size:12px;

}


/* =========================================================
   ONLINE ANIMATION
========================================================= */

@keyframes onlinePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.4);

        opacity:.55;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


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

@media(max-width:768px){

    .pa-info-service{

        padding:45px 0;
		margin-top:32px;

    }


    .pa-info-header{

        padding:0 20px;

        margin-bottom:28px;

    }


    .pa-info-header h2{

        font-size:28px;

    }


    .pa-info-header p{

        font-size:14px;

    }


    .pa-info-grid{

        grid-template-columns:1fr;

        padding:0 20px;

        gap:20px;

    }


    .pa-service-card,
    .pa-visitor-card{

        padding:24px;

        border-radius:20px;

    }


    .card-title h3{

        font-size:20px;

    }


    .visitor-grid{

        gap:12px;

    }


    .visitor-grid > div{

        padding:16px 12px;

    }


    .visitor-grid strong{

        font-size:27px;

    }


    .holiday-box{

        align-items:flex-start;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .pa-info-service{

        border-radius:20px;

    }


    .pa-info-header h2{

        font-size:25px;

    }


    .pa-info-label{

        padding:7px 15px;

        font-size:13px;

    }


    .service-hour{

        font-size:20px;

    }


    .service-break{

        flex-wrap:wrap;

    }


    .card-heading{

        gap:11px;

    }


    .pa-icon{

        width:46px;
        height:46px;

        flex-basis:46px;

        font-size:18px;

    }


    .card-title h3{

        font-size:19px;

    }

}