/* DECENT CRAFT — shared confirm/alert modal.
   Deliberately self-contained (no dependency on global.css's Seam variables
   or the AdminPortal layout's own inline <style> block) since this is
   loaded on both — the AdminPortal layout doesn't load global.css at all,
   and the storefront layout doesn't share AdminPortal's variables. Colors
   are hardcoded rather than themed so it looks the same, deliberately
   neutral and professional, regardless of which surface it's shown on. */

.dc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 20, 25, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
}
.dc-modal-overlay.dc-modal-open {
    opacity: 1;
    visibility: visible;
}

.dc-modal {
    background: #ffffff;
    border-radius: 12px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: 26px 26px 20px;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dc-modal-overlay.dc-modal-open .dc-modal {
    transform: translateY(0) scale(1);
}

.dc-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 14px;
    background: rgba(180, 35, 24, 0.1);
    color: #b42318;
}
.dc-modal-icon.dc-modal-icon--info {
    background: rgba(30, 64, 175, 0.1);
    color: #1e40af;
}

.dc-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #14161a;
    margin: 0 0 8px;
    line-height: 1.35;
}

.dc-modal-message {
    font-size: 0.92rem;
    color: #4b5160;
    line-height: 1.55;
    margin: 0 0 22px;
    white-space: pre-line;
}

.dc-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.dc-modal-btn {
    padding: 9px 18px;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s ease, transform 0.05s ease;
}
.dc-modal-btn:active { transform: scale(0.97); }

.dc-modal-btn--cancel {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}
.dc-modal-btn--cancel:hover { background: #e9eaee; }

.dc-modal-btn--confirm {
    background: #b42318;
    color: #fff;
}
.dc-modal-btn--confirm:hover { opacity: 0.9; }

.dc-modal-btn--confirm.dc-modal-btn--neutral {
    background: #1e293b;
}

.dc-modal-btn--ok {
    background: #1e293b;
    color: #fff;
}
.dc-modal-btn--ok:hover { opacity: 0.9; }