/* ===========================================================
   UCTH Patient Assistance Centre
   Version 2.0
   Horizontal Sliding Screen Design
=========================================================== */


:root{

    --ucth-green:#0B8F4D;
    --ucth-green-dark:#08743F;
    --ucth-light:#F7FAFC;
    --ucth-border:#E5E7EB;
    --ucth-text:#1F2937;
    --ucth-grey:#6B7280;
    --ucth-shadow:0 18px 45px rgba(0,0,0,.18);

}


/* ===========================================================
   MAIN WIDGET
=========================================================== */


#patient-assistance-widget{

    position:fixed;

    right:28px;

    bottom:28px;

    z-index:9999;

}



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


#pa-floating-btn{

    width:68px;

    height:68px;

    border:none;

    border-radius:50%;

    background:var(--ucth-green);

    color:white;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:.35s ease;

}


#pa-floating-btn:hover{

    background:var(--ucth-green-dark);

    transform:translateY(-4px);

}


#pa-floating-btn i{

    font-size:34px;

}



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


#pa-card{

    width:380px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    position:absolute;

    right:0;

    bottom:10px;

    display:none;

    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .3s ease,
        transform .3s ease;

}



#pa-card.pa-show{

    opacity:1;

    transform:translateY(0);

}



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


.pa-header{

    background:linear-gradient(
        135deg,
        var(--ucth-green),
        #13A45C
    );

    color:white;

    display:flex;

    align-items:center;

    padding:18px;

}



.pa-header-left img{

    width:54px;

    height:54px;

    border-radius:50%;

    background:white;

    padding:4px;

}



.pa-header-center{

    flex:1;

    margin-left:14px;

}



.pa-header-center h3{

    margin:0;

    font-size:17px;

    font-weight:600;

}



.pa-status{

    display:flex;

    align-items:center;

    margin-top:6px;

    font-size:13px;

}



.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#5CFF6A;

    margin-right:8px;

}



.pa-close-btn{

    border:none;

    background:none;

    color:white;

    font-size:26px;

    cursor:pointer;

}



/* ===========================================================
   SLIDER AREA
=========================================================== */


.pa-content{

    width:100%;

    overflow:hidden;

}



.pa-slider{

    display:flex;

    width:200%;

    transition:
        transform .45s ease;

}



.pa-screen{

    width:50%;

    flex-shrink:0;

}



/* ===========================================================
   HOME SCREEN
=========================================================== */


.pa-body{

    padding:22px;

}



.pa-body h4{

    margin-top:0;

    color:var(--ucth-text);

}



.pa-body p{

    color:var(--ucth-grey);

    line-height:1.7;

}



/* ===========================================================
   ACTION BUTTONS
=========================================================== */


.pa-actions{

    padding:0 22px 22px;

}



.pa-actions a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px;

    margin-bottom:10px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.3s ease;

}



.pa-actions a:first-child{

    background:#25D366;

    color:white;

}



.pa-actions a:first-child:hover{

    background:#20BD5A;

}



.pa-actions a:not(:first-child){

    background:#F4F6F8;

    color:var(--ucth-text);

}



.pa-actions a:not(:first-child):hover{

    background:#E8ECEF;

}



.action-arrow{

    margin-left:auto;

}

/* ===========================================================
   DEPARTMENT SCREEN
=========================================================== */


.pa-department-header{

    display:flex;

    align-items:center;

    padding:18px;

    font-weight:600;

    color:var(--ucth-text);

}



.pa-department-header button{

    border:none;

    background:none;

    cursor:pointer;

    margin-right:12px;

    font-size:18px;

    color:var(--ucth-text);

}



.pa-department-list{

    padding:0 18px 18px;

    display:flex;

    flex-direction:column;

    gap:10px;

}



/* Department Cards */

.pa-department-list a{

    display:flex;

    align-items:center;

    gap:12px;

    background:#F7F7F7;

    padding:14px;

    border-radius:12px;

    text-decoration:none;

    color:var(--ucth-text);

    transition:.25s ease;

}



.pa-department-list a:hover{

    background:#E8F5EC;

    transform:translateX(5px);

}



/* Department Icon */

.department-icon{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#E8F5EC;

    color:var(--ucth-green);

    border-radius:50%;

    flex-shrink:0;

}



.department-icon i{

    font-size:18px;

}



/* Department Text */

.department-details{

    flex:1;

}



.department-details h5{

    margin:0;

    font-size:15px;

    font-weight:600;

}



.department-details small{

    color:var(--ucth-grey);

    font-size:12px;

}



/* ===========================================================
   FOOTER
=========================================================== */


.pa-footer{

    background:#F8FAFB;

    border-top:1px solid var(--ucth-border);

    padding:12px;

    text-align:center;

}



.reply-time{

    color:var(--ucth-grey);

    font-size:13px;

}



.reply-time i{

    margin-right:5px;

}



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


.pa-pulse{

    animation:paPulse 1s ease;

}



@keyframes paPulse{


    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.15);

    }


    100%{

        transform:scale(1);

    }


}



/* ===========================================================
   MOBILE RESPONSIVENESS
=========================================================== */


@media(max-width:768px){


    #patient-assistance-widget{

        right:15px;

        bottom:15px;

    }



    #pa-card{

        width:330px;

    }


}



@media(max-width:420px){


    #pa-card{

        width:calc(100vw - 30px);

        right:-5px;

    }



    .pa-body{

        padding:18px;

    }



    .pa-actions{

        padding:0 18px 18px;

    }


}



/* ===========================================================
   SMALL SCREEN HEIGHT ADJUSTMENT
=========================================================== */


@media(max-height:600px){


    .pa-body p{

        line-height:1.4;

    }



    .pa-actions a{

        padding:10px;

    }


}



/* ===========================================================
   SLIDE STATE CONTROL

   JavaScript will add/remove:
   .show-departments

=========================================================== */


#patient-assistance-widget.show-departments .pa-slider{

    transform:translateX(-50%);

}



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


#pa-floating-btn:focus,
.pa-close-btn:focus,
.pa-department-header button:focus,
.pa-actions a:focus,
.pa-department-list a:focus{

    outline:2px solid var(--ucth-green);

    outline-offset:3px;

}