/* =====================================================
   ACCESSIBILITY WIDGET
   SAFE MODE FOR BBWS WEBSITE
===================================================== */


/* ===============================
   PANEL
================================ */

.accessibility-panel{

    position:fixed;

    right:25px;

    bottom:90px;

    width:320px;

    max-height:80vh;

    overflow-y:auto;

    background:#fff;

    border-radius:20px;

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

    z-index:99999;

    display:none;

}


.accessibility-panel.active{

    display:block;

    animation:
    accShow .25s ease;

}




@keyframes accShow{

    from{

        opacity:0;

        transform:
        translateY(20px);

    }


    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


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


.accessibility-header{

    background:#2C41A4;

    color:white;

    padding:18px;

    border-radius:20px 20px 0 0;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.accessibility-header h5{

    margin:0;

    font-size:16px;

    font-weight:700;

}



.accessibility-close{

    border:none;

    background:none;

    color:white;

    font-size:18px;

}



/* ===============================
   BODY
================================ */


.accessibility-body{

    padding:18px;

}



.accessibility-group{

    margin-bottom:20px;

}



.accessibility-title{

    font-size:13px;

    font-weight:700;

    color:#2C41A4;

    margin-bottom:12px;

}



/* ===============================
   BUTTON
================================ */


.accessibility-buttons{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:10px;

}



.accessibility-btn{

    border:none;

    padding:10px 5px;

    border-radius:12px;

    background:#f1f4ff;

    color:#2C41A4;

    font-size:12px;

    cursor:pointer;

    transition:.3s;

}



.accessibility-btn:hover{

    background:#2C41A4;

    color:white;

}



.accessibility-btn.active{

    background:#2C41A4;

    color:white;

}



/* ===============================
   SWITCH
================================ */


.acc-option{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

    font-size:13px;

}



/* switch */

.acc-switch{

    position:relative;

    width:42px;

    height:22px;

}



.acc-switch input{

    opacity:0;

    width:0;

    height:0;

}



.acc-slider{

    position:absolute;

    cursor:pointer;

    inset:0;

    background:#ddd;

    border-radius:30px;

}



.acc-slider:before{

    content:"";

    position:absolute;

    width:16px;

    height:16px;

    left:3px;

    bottom:3px;

    background:white;

    border-radius:50%;

    transition:.3s;

}



.acc-switch input:checked + .acc-slider{

    background:#2C41A4;

}



.acc-switch input:checked + .acc-slider:before{

    transform:translateX(20px);

}



/* ===============================
   RANGE
================================ */


.acc-range{

    width:100%;

    accent-color:#2C41A4;

}



/* ===============================
   ACCESSIBILITY EFFECT
================================ */


/*
 Jangan gunakan *
 Jangan menyentuh navbar/footer/card
 */


/* Font size */
/* ===============================
   FONT SCALE
================================ */

.app{

    --acc-font-scale:1;

}


.app *{

    font-size:calc(
        100% * var(--acc-font-scale)
    );

}


/* High contrast */

body.acc-high-contrast .app{

    filter:contrast(120%);

}



/* Highlight link */

body.acc-highlight-link .app a{

    outline:2px solid #ffcc00;

    background:#fff7b2;

}



/* Highlight heading */

body.acc-highlight-heading 
.app h1,
body.acc-highlight-heading 
.app h2,
body.acc-highlight-heading 
.app h3,
body.acc-highlight-heading 
.app h4,
body.acc-highlight-heading 
.app h5{

    background:#fff7b2;

    color:#000;

}

/* ===============================
   BIG CURSOR
================================ */

body.acc-big-cursor,
body.acc-big-cursor * {

    cursor:
    url('/assets/accessibility/images/big-cursor.png') 64 64,
    auto !important;

}


/* Accessibility widget tetap normal */

body.acc-big-cursor .accessibility,
body.acc-big-cursor .accessibility * {

    cursor:auto !important;

}

/* ===============================
   DARK MODE SAFE
================================ */


body.acc-dark-mode .app{

    background:#121212;

}



body.acc-dark-mode .app p,
body.acc-dark-mode .app li{

    color:#ddd;

}



body.acc-dark-mode .app h1,
body.acc-dark-mode .app h2,
body.acc-dark-mode .app h3,
body.acc-dark-mode .app h4,
body.acc-dark-mode .app h5,
body.acc-dark-mode .app h6{

    color:white;

}

/* ===============================
   FLOATING BUTTON
================================ */


.accessibility-trigger{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border-radius:50%;

    border:none;

    background:#2C41A4;

    color:white;

    font-size:24px;

    z-index:99999;

    box-shadow:
        0 10px 25px rgba(0,0,0,.2);

    cursor:pointer;

    transition:.3s;

}



.accessibility-trigger:hover{

    transform:scale(1.1);

}

/* ===============================
   SPEECH ACTIVE
================================ */

body.acc-speech-active a:hover{

    outline:3px solid #2C41A4;

}

/*PERATAAN TEXT*/
.app{

    --acc-font-scale:1;

    --acc-text-align:left;

    --acc-text-spacing:normal;

    --acc-line-height:normal;

}
/*Pengaturan Perataan Teks*/
.app p,
.app li,
.app td,
.app th,
.app div,
.app article{

    text-align:var(--acc-text-align);

}

.app h1,
.app h2,
.app h3,
.app h4,
.app h5,
.app h6{

    text-align:var(--acc-text-align);

}
/*Pengaturan Spacing Teks*/
.app p,
.app li,
.app td,
.app th,
.app article,
.app div{

    letter-spacing:var(--acc-text-spacing);

}
/*Pengaturan Lineheight Teks*/
.app p,
.app li,
.app td,
.app th,
.app article,
.app div,
.app h1,
.app h2,
.app h3,
.app h4,
.app h5,
.app h6{

    line-height:var(--acc-line-height);

}

/* Import Font Lexend (Ramah Disleksia) */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600;700&display=swap');

/* Style Efek Ramah Disleksia */
body.acc-dyslexia .app,
body.acc-dyslexia .app * {
    font-family: 'Lexend', 'Comic Sans MS', 'OpenDyslexic', sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

/* Style Kursor Besar */
/* Style Kursor Besar (Base64 SVG + Universal Hover) */
body.acc-big-cursor,
body.acc-big-cursor *,
body.acc-big-cursor a,
body.acc-big-cursor button,
body.acc-big-cursor input,
body.acc-big-cursor label,
body.acc-big-cursor *:hover {
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJibGFjayIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Ik0zIDNsNyAxOCAzLTcgNy0zTDMgM3oiLz48L3N2Zz4=") 0 0, auto !important;
}