/* =====================================================
   Finance Assistant
   Component    : Global Overlay
   File         : style.css
   Version      : 1.0.0
===================================================== */


/* =====================================================
   OVERLAY ROOT
===================================================== */

.global-overlay{

    position:fixed;

    inset:0;

    z-index:10000;

    visibility:hidden;

    pointer-events:none;

}


/* =====================================================
   BACKDROP
===================================================== */

.global-overlay-backdrop{

    position:absolute;

    inset:0;

    background:
        rgba(0,0,0,.45);

    opacity:0;

    transition:
        opacity .25s ease;

}


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

.global-overlay-panel{

    position:absolute;

    top:0;

    right:0;

    width:

        min(
            100%,
            520px
        );

    height:100%;

    box-sizing:border-box;

    background:#ffffff;

    color:#253f3d;

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

    overflow-y:auto;

    transform:
        translateX(100%);

    transition:
        transform .3s ease;

    display:flex;

    flex-direction:column;

}


/* =====================================================
   OPEN STATE
===================================================== */

.global-overlay.is-open{

    visibility:visible;

    pointer-events:auto;

}


.global-overlay.is-open
.global-overlay-backdrop{

    opacity:1;

}


.global-overlay.is-open
.global-overlay-panel{

    transform:
        translateX(0);

}


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

.global-overlay-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:16px;

    padding:

        20px

        20px

        16px;

    border-bottom:

        1px solid
        #e5e9e8;

    flex-shrink:0;

}


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

.global-overlay-heading{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.global-overlay-heading h2{

    margin:0;

    font-size:20px;

    line-height:1.3;

    font-weight:700;

    color:#253f3d;

}


.global-overlay-heading span{

    font-size:12px;

    line-height:1.4;

    color:#7d8988;

}


/* =====================================================
   CLOSE
===================================================== */

.global-overlay-close{

    width:36px;

    height:36px;

    flex-shrink:0;

    border:none;

    border-radius:50%;

    background:#f1f5f4;

    color:#334b4a;

    font-size:18px;

    cursor:pointer;

}


.global-overlay-close:active{

    transform:scale(.94);

}


/* =====================================================
   CONTENT
===================================================== */

.global-overlay-content{

    flex:1;

    padding:

        20px;

    overflow-y:auto;

}


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

.global-overlay-footer{

    padding:

        14px

        20px

        20px;

    text-align:center;

    flex-shrink:0;

    border-top:

        1px solid
        #e5e9e8;

}


.global-overlay-footer span{

    font-size:11px;

    color:#9aa6a5;

}


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

body.overlay-open{

    overflow:hidden;

}


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

@media(

    max-width:480px

){

    .global-overlay-panel{

        width:100%;

    }


    .global-overlay-header{

        padding:

            18px

            18px

            14px;

    }


    .global-overlay-content{

        padding:18px;

    }

}

/* =====================================================
   OVERLAY ROW
===================================================== */

.global-overlay-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    width:100%;

    padding:10px 0;

    box-sizing:border-box;

}


.global-overlay-row span{

    flex:1;

    min-width:0;

    font-size:16px;

    line-height:1.4;

    color:#354846;

}


.global-overlay-row strong{

    flex-shrink:0;

    min-width:125px;

    text-align:right;

    font-size:16px;

    line-height:1.4;

    font-weight:700;

    color:#294845;

}


/* =====================================================
   OVERLAY DIVIDER
===================================================== */

.global-overlay-divider{

    width:100%;

    height:1px;

    margin:14px 0;

    background:

        rgba(

            50,

            80,

            78,

            .15

        );

}


/* =====================================================
   TOTAL
===================================================== */

.global-overlay-total{

    padding-top:14px;

}


.global-overlay-total span{

    font-size:18px;

    font-weight:700;

    color:#253f3d;

}


.global-overlay-total strong{

    font-size:20px;

    font-weight:800;

    color:#234845;

}


/* =====================================================
   OVERLAY CONTENT
===================================================== */

.global-overlay-content{

    display:flex;

    flex-direction:column;

    gap:0;

}

/* =====================================================
   OVERLAY SUBTITLE
===================================================== */

.global-overlay-subtitle{

    padding:

        8px

        0

        4px;

    font-size:13px;

    font-weight:600;

    color:#81908f;

}

/* =====================================================
   GLOBAL OVERLAY : ACTIONS
===================================================== */

.global-overlay-actions{

    padding:16px 20px 6px;

}


/* =====================================================
   EXPORT DIVIDER
===================================================== */

.global-overlay-divider{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

    color:#94A3B8;

    font-size:13px;

    font-weight:500;

    text-align:center;

}


.global-overlay-divider::before,
.global-overlay-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#E5E7EB;

}


.global-overlay-divider span{

    white-space:nowrap;

}


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

.global-overlay-export{

    width:100%;

    min-height:52px;

    padding:12px 16px;

    border:1px solid #94A3B8;

    border-radius:12px;

    background:#FFFFFF;

    color:#253F3D;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    transition:

        background-color .2s ease,

        border-color .2s ease,

        transform .1s ease;

}


.global-overlay-export:hover{

    background:#F8FAFA;

    border-color:#CBD5D1;

}


.global-overlay-export:active{

    background:#F1F5F9;

    transform:scale(.98);

}