/* ==========================================================================
   Swal popups, new look - see CommonHelper::NOTIFY_V2.
   Matches the invest confirmation (.oppd-swal): white card, dark title, yellow
   main button, white outlined Cancel. A popup takes it through the fb-swal
   classes, see SWAL_V2_CLASS in js/swal/helper_functions.js.
   ========================================================================== */

.swal2-popup.fb-swal {
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 28px 24px 22px;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .18);
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.swal2-popup.fb-swal .swal2-title {
    margin: 0;
    padding: 0;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

/* .swal2-content is the text box in Swal 10, which the site footers load over the Swal 11 in the head */
.swal2-popup.fb-swal .swal2-content,
.swal2-popup.fb-swal .swal2-html-container {
    margin: 8px 0 0;
    padding: 0;
    color: #3f4550;
    font-size: 14px;
    line-height: 1.55;
}

/* the icon smaller than Swal's 80px, so the message leads */
.swal2-popup.fb-swal .swal2-icon {
    margin: 0 auto 16px;
    font-size: 11px;
}

/* icon colours: the panel's status colours instead of Swal's own */
.swal2-popup.fb-swal .swal2-icon.swal2-success { border-color: rgba(15, 123, 82, .25); color: #0f7b52; }
.swal2-popup.fb-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(15, 123, 82, .25); }
.swal2-popup.fb-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #0f7b52; }
.swal2-popup.fb-swal .swal2-icon.swal2-error { border-color: #b42318; color: #b42318; }
.swal2-popup.fb-swal .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #b42318; }
.swal2-popup.fb-swal .swal2-icon.swal2-warning { border-color: #e9b56a; color: #a2620a; }
.swal2-popup.fb-swal .swal2-icon.swal2-info,
.swal2-popup.fb-swal .swal2-icon.swal2-question { border-color: #9db5dd; color: #1c4f9c; }

.swal2-popup.fb-swal .swal2-actions {
    gap: 10px;
    width: 100%;
    margin: 22px 0 0;
    padding: 0;
}

.swal2-popup.fb-swal .fb-swal-btn {
    min-width: 110px;
    margin: 0;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    box-shadow: none;
    transition: background .12s, border-color .12s;
}
.swal2-popup.fb-swal .fb-swal-confirm { border: 1px solid #ffcc2a; background: #ffcc2a; color: #1a1a1a; }
.swal2-popup.fb-swal .fb-swal-confirm:hover { border-color: #e6b415; background: #e6b415; }
.swal2-popup.fb-swal .fb-swal-cancel,
.swal2-popup.fb-swal .fb-swal-deny { border: 1px solid #e6e8ec; background: #fff; color: #1a1a1a; }
.swal2-popup.fb-swal .fb-swal-cancel:hover,
.swal2-popup.fb-swal .fb-swal-deny:hover { background: #f4f5f7; }
.swal2-popup.fb-swal .fb-swal-btn:focus { outline: none; box-shadow: none; }
.swal2-popup.fb-swal .fb-swal-btn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 204, 42, .35); }

/* a text box inside the popup, like the investment limit prompt */
.swal2-popup.fb-swal .swal2-input {
    height: 42px;
    margin: 16px 0 0;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
}
.swal2-popup.fb-swal .swal2-input:focus { border-color: #ffcc2a; box-shadow: 0 0 0 3px rgba(255, 204, 42, .25); }
.swal2-popup.fb-swal .swal2-validation-message { margin: 10px 0 0; border-radius: 8px; background: #fdeceb; color: #b42318; font-size: 13px; }

@media (max-width: 480px) {
    .swal2-popup.fb-swal .swal2-actions { flex-direction: column-reverse; }
    .swal2-popup.fb-swal .fb-swal-btn { width: 100%; }
}

/* html messages often come in a <p>; its bottom margin would add a gap above the buttons */
.swal2-popup.fb-swal .swal2-html-container > :last-child,
.swal2-popup.fb-swal .swal2-content > :last-child { margin-bottom: 0; }
.swal2-popup.fb-swal .swal2-html-container small { display: block; margin-top: 8px; }

/* in Swal 10 the html box sits inside .swal2-content, which already has the gap */
.swal2-popup.fb-swal .swal2-content .swal2-html-container { margin: 0; }