/* ══════════════════════════════════════
   MODALS
══════════════════════════════════════ */
.modal-overlay{
    display:none;position:fixed;inset:0;z-index:9000;
    background:rgba(0,0,0,.5);
    align-items:flex-start;justify-content:flex-end;
    overflow-y:auto;
}
.modal-overlay.open{display:flex}

.modal-drawer{
    position:relative;
    width:100%;
    max-width:100%;
    min-height:100vh;
    background:var(--white);
    padding:66px 16px 66px 16px;
    animation:slideIn .25s ease;
    margin:0 0 0 auto;
}

.modal-drawer .modal-close{
    top: 12px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    right: 0;
}

@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}

@media(min-width:48rem){
    .modal-drawer{min-height:100vh;max-width:520px;padding:90px 32px;}

    .modal-drawer .modal-close{
        top: 24px;
        right: 32px;
    }
}

.modal-close{
    position:absolute;top:24px;right:24px;
    width:42px;height:42px;background:none;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;color:var(--black);transition:color .15s;
}
.modal-close:hover{color:var(--grey-1)}

.modal-h1{font-size:20px;font-weight:800;color:var(--black);margin-bottom:24px;letter-spacing:-.01em}



.modal-title{
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    /* Black */
    color: var(--black);
    margin: 0 0 20px;
}

@media (min-width: 1024px) {
    .modal-title{
        font-size: 28px;
        margin: 0 0 24px;
    }
}

.modal-desc{color:var(--black);margin-bottom:24px}
.modal-note{font-size:16px;color:var(--grey-2);line-height:1.6}


/* Modal 2: delivery */
.delivery-card{
    border:1px solid var(--grey-1);
    border-radius:0;
    padding:16px;
    margin-bottom:12px;
    color:var(--grey-3);
    background-color: var(--bg);
}
.delivery-card-header{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:20px;
    font-weight:400;
    color:var(--black);
    margin-bottom:6px;
}
.delivery-card-header svg{width:24px;height:24px}
.delivery-card__body{
    margin-top: 20px;
}

.delivery-card__body p{
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: 400;
}

.delivery-card__list{
    margin-bottom: 24px;
}

.map-placeholder{
    width:100%;height:220px;background:#e8e8e6;border-radius:0;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;color:var(--grey-1);position:relative;overflow:hidden;
    margin-top:8px;
}
.map-pin-card{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    background:var(--white);border-radius:0;padding:10px 14px;
    box-shadow:0 4px 16px rgba(0,0,0,.12);
    font-size:12px;line-height:1.5;color:var(--black);max-width:200px;
    display:flex;align-items:flex-start;gap:6px;
}
.map-pin-card svg{width:16px;height:16px;fill:var(--black);flex-shrink:0;margin-top:2px}

/* Modal 3: payment */
.payment-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding: 0;
    margin: 0 0 24px;
}
.payment-list li{
    margin: 0;
    display:flex;align-items:center;gap:10px;font-size:16px;color:var(--black);
}
.payment-list li svg{width:24px;height:24px;}