/* ====================================================================
   SweetAlert popup — dashboard aesthetic override (loaded globally).
   Charcoal #1a1f36, pink #ff4b7d, slate #94a3b8, soft border #eef2f8.
   ==================================================================== */
.sweet-overlay {
    background: rgba(15, 35, 52, 0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sweet-alert {
    border-radius: 20px !important;
    padding: 36px 28px 28px !important;
    box-shadow: 0 24px 64px rgba(15, 35, 52, 0.22) !important;
    border: 1px solid #eef2f8 !important;
    background: #ffffff !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

.sweet-alert h2 {
    color: #1a1f36 !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin: 8px 0 12px !important;
    padding: 0 8px !important;
}
.sweet-alert p {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

/* Success icon — charcoal ring with pink check. */
.sweet-alert .sa-icon.sa-success {
    border-color: #1a1f36 !important;
    background: #fafbfd !important;
}
.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after,
.sweet-alert .sa-icon.sa-success .sa-fix {
    background: #ffffff !important;
}
.sweet-alert .sa-icon.sa-success .sa-placeholder {
    border-color: #eef2f8 !important;
}
.sweet-alert .sa-icon.sa-success .sa-line {
    background-color: #ff4b7d !important;
    height: 5px !important;
    border-radius: 999px !important;
}

/* Info icon — charcoal ring with charcoal "i" body. */
.sweet-alert .sa-icon.sa-info {
    border-color: #1a1f36 !important;
}
.sweet-alert .sa-icon.sa-info::before {
    background-color: #1a1f36 !important;
}
.sweet-alert .sa-icon.sa-info::after {
    background-color: #1a1f36 !important;
}

/* Error icon — dashboard red */
.sweet-alert .sa-icon.sa-error {
    border-color: #c2185b !important;
}
.sweet-alert .sa-icon.sa-error .sa-line {
    background-color: #c2185b !important;
}

/* Warning icon — pink-toned */
.sweet-alert .sa-icon.sa-warning {
    border-color: #ff4b7d !important;
}
.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot {
    background-color: #ff4b7d !important;
}

/* Confirm button — overrides inline confirmButtonColor (e.g., #57a94f green). */
.sweet-alert button,
.sweet-alert button.confirm {
    background: #1a1f36 !important;
    background-color: #1a1f36 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 11px 26px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 10px 24px rgba(26, 31, 54, 0.22) !important;
    margin-top: 18px !important;
    transition: background 180ms ease, transform 180ms ease !important;
}
.sweet-alert button:hover,
.sweet-alert button.confirm:hover {
    background: #0f1424 !important;
    background-color: #0f1424 !important;
    transform: translateY(-1px);
}
.sweet-alert button:focus,
.sweet-alert button.confirm:focus {
    outline: none !important;
    box-shadow: 0 10px 24px rgba(26, 31, 54, 0.22), 0 0 0 3px rgba(26, 31, 54, 0.15) !important;
}

/* Cancel button — outlined slate pill */
.sweet-alert button.cancel {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #eef2f8 !important;
    box-shadow: none !important;
}
.sweet-alert button.cancel:hover {
    background: #fafbfd !important;
    background-color: #fafbfd !important;
    border-color: #1a1f36 !important;
    color: #1a1f36 !important;
}

/* Prompt input field */
.sweet-alert input {
    border: 1px solid #eef2f8 !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
    color: #1a1f36 !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.sweet-alert input:focus {
    border-color: #1a1f36 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* ====================================================================
   SweetAlert2 (v11) — same aesthetic, different DOM.
   The Rewards page uses sweetalert2@11 which renders into .swal2-*
   classes instead of .sweet-alert / .sa-icon, so the rules above
   never matched it. These mirror the look across both versions.
   ==================================================================== */
.swal2-container {
    background: rgba(15, 35, 52, 0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.swal2-popup {
    border-radius: 20px !important;
    padding: 36px 28px 28px !important;
    box-shadow: 0 24px 64px rgba(15, 35, 52, 0.22) !important;
    border: 1px solid #eef2f8 !important;
    background: #ffffff !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

.swal2-title {
    color: #1a1f36 !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin: 8px 0 12px !important;
    padding: 0 8px !important;
}

.swal2-html-container,
.swal2-content {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

/* Success icon — charcoal ring with pink check. */
.swal2-icon.swal2-success {
    border-color: #1a1f36 !important;
    color: #1a1f36 !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: #1a1f36 !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'],
.swal2-icon.swal2-success [class*=' swal2-success-line'] {
    background-color: #ff4b7d !important;
    height: 5px !important;
    border-radius: 999px !important;
}
.swal2-icon.swal2-success .swal2-success-fix,
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success [class*=' swal2-success-circular-line'] {
    background-color: #ffffff !important;
}

/* Error icon — pink-toned to match brand */
.swal2-icon.swal2-error {
    border-color: #c2185b !important;
    color: #c2185b !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'],
.swal2-icon.swal2-error [class*=' swal2-x-mark-line'] {
    background-color: #c2185b !important;
}

/* Warning icon — pink */
.swal2-icon.swal2-warning {
    border-color: #ff4b7d !important;
    color: #ff4b7d !important;
}

/* Info / Question icons — charcoal */
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    border-color: #1a1f36 !important;
    color: #1a1f36 !important;
}

/* Confirm button — charcoal pill (overrides the SweetAlert2 default purple). */
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-confirm:focus {
    background: #1a1f36 !important;
    background-color: #1a1f36 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 11px 28px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 10px 24px rgba(26, 31, 54, 0.22) !important;
    outline: none !important;
    transition: background 180ms ease, transform 180ms ease !important;
}
.swal2-styled.swal2-confirm:hover {
    background: #0f1424 !important;
    background-color: #0f1424 !important;
    transform: translateY(-1px);
}

/* Cancel/Deny — outlined slate pill */
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #64748b !important;
    border: 1px solid #eef2f8 !important;
    border-radius: 999px !important;
    padding: 11px 28px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
}
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-deny:hover {
    background: #fafbfd !important;
    background-color: #fafbfd !important;
    border-color: #1a1f36 !important;
    color: #1a1f36 !important;
}

/* Input fields inside Swal */
.swal2-input,
.swal2-textarea,
.swal2-select {
    border: 1px solid #eef2f8 !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
    color: #1a1f36 !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: #1a1f36 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}