/* MeTask safety and completion feedback. */
.metask-completed-meta {
    color: #2f8f62 !important;
    font-weight: 620;
}

.metask-confirm-modal .modal-dialog {
    max-width: 390px;
}

.metask-confirm-modal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 28px 90px rgba(31, 51, 92, .22);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.metask-confirm-modal .modal-body {
    padding: 26px;
}

.metask-confirm-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: #edf3ff;
    color: #2f61e9;
    font-size: 22px;
}

.metask-confirm-icon.is-danger {
    background: #fff0ee;
    color: #c6534b;
}

.metask-confirm-copy h2 {
    margin: 0;
    color: #25262a;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.metask-confirm-copy > p {
    margin: 8px 0 0;
    color: #45474e;
    font-size: 13px;
    font-weight: 620;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.metask-confirm-detail {
    margin-top: 13px;
    padding: 11px 12px;
    border: 1px solid rgba(44, 57, 78, .07);
    border-radius: 13px;
    background: #f7f8fb;
    color: #74777f;
    font-size: 10.5px;
    line-height: 1.55;
}

.metask-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 9px;
    margin-top: 22px;
}

.metask-confirm-actions .btn {
    min-height: 42px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 650;
}

.metask-confirm-actions .btn-light {
    border: 1px solid rgba(44, 57, 78, .07);
    background: #f4f5f8;
    color: #62646a;
}

.metask-danger-zone.is-locked {
    border-color: rgba(111, 117, 128, .10);
    background: rgba(247, 248, 250, .74);
}

.metask-danger-zone.is-locked strong {
    color: #62656d;
}

.metask-danger-zone.is-locked span {
    color: #8a8d94;
}

@media (max-width: 480px) {
    .metask-confirm-modal .modal-dialog {
        margin: 12px;
    }

    .metask-confirm-modal .modal-body {
        padding: 22px;
    }

    .metask-confirm-actions {
        grid-template-columns: 1fr;
    }
}