/* ================================================================
   modal.css  —  Unified Modal System  (SweetAlert2 powered)
   ================================================================ */

/* ── Base popup ── */
.tm-popup {
    border-radius: 20px !important;
    padding: 36px 28px 28px !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.10) !important;
    max-width: 420px !important;
}

/* title */
.tm-popup .swal2-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -0.3px !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}

/* text / content */
.tm-popup .swal2-html-container,
.tm-popup .swal2-content {
    font-size: 14px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

/* icon — only override margin; let SweetAlert2 handle dimensions/border internally */
.tm-popup .swal2-icon {
    margin: 0 auto 20px !important;
}

/* close button */
.tm-popup .swal2-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    color: #9ca3af !important;
    font-size: 22px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 1 !important;
}
.tm-popup .swal2-close:hover { color: #374151 !important; }

/* actions row */
.tm-popup .swal2-actions {
    margin-top: 22px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 0 !important;
}

/* ── Confirm buttons ── */
.tm-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex: 1 !important;
    border: none !important;
    border-radius: 11px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    cursor: pointer !important;
    letter-spacing: -0.1px !important;
    transition: filter 0.15s, transform 0.1s !important;
    white-space: nowrap !important;
}
.tm-btn:hover  { filter: brightness(0.9)  !important; }
.tm-btn:active { transform: scale(0.97)   !important; }
.tm-btn:focus  { outline: none !important; box-shadow: none !important; }

.tm-btn-success  { background: #22c55e !important; box-shadow: 0 3px 12px rgba(34,197,94,0.30)  !important; }
.tm-btn-error    { background: #ef4444 !important; box-shadow: 0 3px 12px rgba(239,68,68,0.30)   !important; }
.tm-btn-warning  { background: #f59e0b !important; box-shadow: 0 3px 12px rgba(245,158,11,0.30)  !important; }
.tm-btn-info     { background: #3b82f6 !important; box-shadow: 0 3px 12px rgba(59,130,246,0.30)  !important; }
.tm-btn-danger   { background: #dc2626 !important; box-shadow: 0 3px 12px rgba(220,38,38,0.30)   !important; }
.tm-btn-restore  { background: #0ea5e9 !important; box-shadow: 0 3px 12px rgba(14,165,233,0.30)  !important; }
.tm-btn-locked   { background: #e11d48 !important; box-shadow: 0 3px 12px rgba(225,29,72,0.30)   !important; }
.tm-btn-confirm  { background: #6366f1 !important; box-shadow: 0 3px 12px rgba(99,102,241,0.30)  !important; }

/* ── Cancel button ── */
.tm-btn-cancel {
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 11px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    white-space: nowrap !important;
}
.tm-btn-cancel:hover  { background: #f9fafb !important; color: #374151 !important; }
.tm-btn-cancel:focus  { outline: none !important; box-shadow: none !important; }

/* ── Loading spinner popup ── */
.tm-popup-loading .swal2-actions { display: none !important; }
.tm-popup-loading .swal2-title   { color: #374151 !important; font-size: 16px !important; }

/* ── Mobile ── */
@media (max-width: 480px) {
    .tm-popup {
        padding: 28px 16px 22px !important;
        border-radius: 16px !important;
    }
    .tm-popup .swal2-actions { flex-wrap: wrap !important; }
    .tm-btn, .tm-btn-cancel  { flex: unset !important; width: 100% !important; }
}