/* ==================================================
   PWA PERPUSTAKAAN UNIVERSITAS TEUKU UMAR
   Version : 1.0
================================================== */

:root{

    --primary:#4F2D9A;
    --primary-dark:#351A73;
    --secondary:#6D4AFF;

    --gold:#F4C542;

    --success:#18B66B;

    --danger:#E53935;

    --background:#F6F8FC;

    --card:#FFFFFF;

    --text:#222;

    --radius:24px;

    --shadow:0 12px 35px rgba(0,0,0,.08);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    background:var(--background);

}
.pwa-app{
    min-height:100vh;
    background:#F6F8FC;
}
/* =========================================================
   PWA SERVICES - FIX
========================================================= */

.pwa-mode .pwa-services {
    display: block !important;
    padding: 35px 18px 40px !important;
    background: #ffffff !important;
}

.pwa-mode .pwa-services-inner {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.pwa-mode .pwa-services .pwa-section-heading {
    margin-bottom: 20px !important;
}

.pwa-mode .pwa-services .pwa-section-heading small {
    display: block !important;
    margin-bottom: 5px !important;
    color: #6b55b8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}

.pwa-mode .pwa-services .pwa-section-heading h2 {
    margin: 0 0 7px !important;
    color: #21154f !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.pwa-mode .pwa-services .pwa-section-heading p {
    margin: 0 !important;
    color: #777 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.pwa-mode .pwa-services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
}

.pwa-mode .pwa-service-card {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    width: 100% !important;
    min-height: 78px !important;
    padding: 13px 15px !important;
    box-sizing: border-box !important;

    background: #f8f7fc !important;
    border: 1px solid rgba(79,45,154,.08) !important;
    border-radius: 18px !important;

    text-decoration: none !important;
    box-shadow: 0 7px 22px rgba(44,30,100,.06) !important;
}

.pwa-mode .pwa-service-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;

    border-radius: 15px !important;
    background: #eee9ff !important;

    font-size: 22px !important;
}

.pwa-mode .pwa-service-card > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.pwa-mode .pwa-service-card strong {
    display: block !important;
    color: #25165b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.pwa-mode .pwa-service-card small {
    display: block !important;
    margin-top: 4px !important;
    color: #888 !important;
    font-size: 11px !important;
}

.pwa-mode .pwa-service-card > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 30px !important;
    height: 30px !important;

    border-radius: 10px !important;
    background: #ffffff !important;
    color: #4f2d9a !important;

    font-size: 16px !important;
    font-weight: 800 !important;
}

@media (min-width: 600px) {

    .pwa-mode .pwa-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}