/* =============================================================================
   MODAL
   ============================================================================= */


/* -----------------------------------------------------------------------------
   OVERLAY
----------------------------------------------------------------------------- */

.modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:flex-end;

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

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity var(--speed-medium),
        visibility var(--speed-medium);

    z-index:1000;

}


/* -----------------------------------------------------------------------------
   ACTIVE
----------------------------------------------------------------------------- */

.modal.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/* -----------------------------------------------------------------------------
   CONTENT
----------------------------------------------------------------------------- */

.modal-content{

    width:100%;

    max-width:760px;

    background:#FAF6EE;

    border-radius:32px 32px 0 0;

    padding:40px;

    position:relative;

    box-shadow:0 -10px 30px rgba(10,29,60,.08);

    transform:translateY(100%);

    transition:transform .55s cubic-bezier(.22,1,.36,1);

}

.modal.active .modal-content{

    transform:translateY(0);

}


/* -----------------------------------------------------------------------------
   HANDLE
----------------------------------------------------------------------------- */

.modal-handle{

    width:48px;

    height:5px;

    margin:-10px auto 42px;

    background:#D8C7A3;

    border-radius:999px;

}


/* -----------------------------------------------------------------------------
   CLOSE BUTTON
----------------------------------------------------------------------------- */

.modal-close{

    position:absolute;

    top:16px;

    right:16px;

    border:none;

    background:none;

    font-size:2rem;

    color:#777;

    cursor:pointer;

    transition:color var(--speed-fast);

}

.modal-close:hover{

    color:#000;

}


/* -----------------------------------------------------------------------------
   BODY
----------------------------------------------------------------------------- */

.modal-body{

    width:100%;

}


/* -----------------------------------------------------------------------------
   TITLE
----------------------------------------------------------------------------- */

.modal-title{

    margin:0;

    text-align:center;

    font-family:var(--font-heading);

    font-size:2rem;

    font-weight:600;

    color:var(--ink);

}


/* -----------------------------------------------------------------------------
   SUBTITLE
----------------------------------------------------------------------------- */

.modal-subtitle{

    margin:10px 0 30px;

    text-align:center;

    color:var(--ink-soft);

    line-height:1.5;

}


/* -----------------------------------------------------------------------------
   DESKTOP
----------------------------------------------------------------------------- */

@media (min-width:769px){

    .modal-content{

        max-width:640px;

        padding:28px 48px 36px;

        border-radius:28px 28px 0 0;

    }

}


/* -----------------------------------------------------------------------------
   MOBILE
----------------------------------------------------------------------------- */

@media (max-width:768px){

    .modal-content{

        padding:28px 24px 32px;

    }

    .modal-title{

        font-size:1.6rem;

    }

}