.ovl[aria-hidden="true"] { display: none; }

.ovl { position: fixed; inset: 0; z-index: 9999; }
.ovl__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }

.ovl__panel{
    position: relative;
    background: rgb(23,97,154);
    color: #FFF;
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    margin: 0;
}

.ovl__close{
    position: absolute;
    color: #FFF;
    top: 10px; right: 10px;
    width: 40px; height: 40px;
    border: 0; background: transparent;
    font-size: 28px; line-height: 1;
    cursor: pointer;
}

.ovl__text  { margin: 0 0 18px; font-size: 13px; }

.ovl__actions{ display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ovl__btn{
    font-size: 10px;
    border: 0;
    padding: 0 4px;
    cursor: pointer;
    background: #111; color: #fff;
}
.ovl__actionlink{
    font-size: 14px;
}
.ovl__btn--ghost{ background: #eee; color: #111; }

@media (min-width: 768px){
    .ovl__panel{
        width: min(600px, calc(100vw - 40px));
        height: min(410px, calc(100vh - 40px));
        margin: auto;
        position: absolute;
        inset: 0;
        box-shadow: 0 20px 60px rgba(0,0,0,.35);
    }
}