/* Shared NSB FMC branding for Alertify, SweetAlert2 and Bootstrap dialogs. */
:root {
    --nsb-dialog-gold: #f6b71b;
    --nsb-dialog-ink: #211e19;
    --nsb-dialog-line: #e8e1d4;
}

body .alertify .ajs-dimmer,
body .swal2-container.swal2-backdrop-show {
    background: rgba(23, 21, 17, .58);
}

body .alertify .ajs-dialog,
body .swal2-popup:not(.swal2-toast),
body .modal .modal-content {
    border: 1px solid var(--nsb-dialog-line);
    border-top: 4px solid var(--nsb-dialog-gold);
    border-radius: 14px;
    background-color: #fff;
    color: var(--nsb-dialog-ink);
    box-shadow: 0 24px 70px rgba(23, 21, 17, .24);
    font-family: inherit;
}

body .alertify:not(.ajs-maximized) .ajs-dialog {
    width: 520px;
    max-width: calc(100% - 24px);
    min-width: 0;
    padding: 0;
}

body .alertify .ajs-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 18px 46px 18px 22px;
    border-bottom: 1px solid var(--nsb-dialog-line);
    border-radius: 10px 10px 0 0;
    background: linear-gradient(110deg, #fff, #fff8e6);
    color: var(--nsb-dialog-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body .alertify .ajs-header::before,
body .modal .modal-title::before {
    content: '';
    display: inline-block;
    flex: 0 0 62px;
    width: 62px;
    height: 36px;
    border-radius: 4px;
    background: #fff url('../img/fmc.jpg') center / contain no-repeat;
    vertical-align: middle;
}

body .alertify .ajs-commands {
    top: 18px;
    right: 12px;
}

body .alertify .ajs-body {
    min-height: 0;
    padding: 24px;
}

body .alertify .ajs-body .ajs-content {
    padding: 0;
    color: #514b42;
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

body .alertify .ajs-footer {
    margin: 0;
    padding: 12px 18px;
    border-top: 1px solid var(--nsb-dialog-line);
    border-radius: 0 0 13px 13px;
    background: #faf8f4;
}

body .alertify .ajs-footer .ajs-buttons .ajs-button,
body .swal2-popup .swal2-actions button {
    min-width: 100px;
    min-height: 42px;
    margin: 4px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}

body .alertify .ajs-footer .ajs-buttons .ajs-ok,
body .swal2-popup .swal2-actions .swal2-confirm,
body .modal .modal-footer .btn-primary {
    border-color: #d69a0b !important;
    background: var(--nsb-dialog-gold) !important;
    color: var(--nsb-dialog-ink) !important;
}

body .alertify .ajs-footer .ajs-buttons .ajs-ok:hover,
body .swal2-popup .swal2-actions .swal2-confirm:hover,
body .modal .modal-footer .btn-primary:hover {
    background: #ffd05b !important;
}

body .alertify .ajs-footer .ajs-buttons .ajs-cancel,
body .swal2-popup .swal2-actions .swal2-cancel {
    border-color: #d8d1c5 !important;
    background: #fff !important;
    color: #514b42 !important;
}

body .alertify .ajs-footer .ajs-buttons .ajs-cancel:hover,
body .swal2-popup .swal2-actions .swal2-cancel:hover {
    background: #f3f0e9 !important;
}

body .alertify .ajs-button:focus-visible,
body .swal2-popup button:focus-visible,
body .modal .modal-footer .btn:focus-visible {
    outline: 3px solid #986609;
    outline-offset: 3px;
}

body .alertify .ajs-body .ajs-input {
    width: 100%;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid #cfc5b4;
    border-radius: 8px;
    color: var(--nsb-dialog-ink);
    font: inherit;
}

/* Reserve a logo strip without replacing the dialog's title, icon or content. */
body .swal2-popup:not(.swal2-toast) {
    max-width: calc(100vw - 28px);
    padding: 72px 0 24px;
    background-image: url('../img/fmc.jpg');
    background-position: center 16px;
    background-size: 78px 42px;
    background-repeat: no-repeat;
}

body .swal2-popup:not(.swal2-toast) .swal2-title {
    padding: 12px 24px 0;
    color: var(--nsb-dialog-ink);
    font-size: 22px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body .swal2-popup:not(.swal2-toast) .swal2-html-container {
    margin: 16px 24px 0;
    padding: 0;
    color: #514b42;
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

body .swal2-popup .swal2-actions {
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 18px;
}

body .swal2-popup .swal2-icon.swal2-question {
    border-color: #f2d98e;
    color: #a36b00;
}

body .modal .modal-header {
    border-bottom: 1px solid var(--nsb-dialog-line);
    border-radius: 10px 10px 0 0;
    background: linear-gradient(110deg, #fff, #fff8e6);
    color: var(--nsb-dialog-ink);
}

body .modal .modal-title {
    color: var(--nsb-dialog-ink);
    line-height: 1.5;
}

body .modal .modal-title::before {
    margin-right: 12px;
}

body .modal .modal-footer {
    border-top: 1px solid var(--nsb-dialog-line);
    border-radius: 0 0 13px 13px;
    background: #faf8f4;
}

@media (max-width: 575.98px) {
    body .alertify .ajs-header { padding: 16px 40px 16px 16px; font-size: 16px; gap: 10px; }
    body .alertify .ajs-body { padding: 20px 16px; }
    body .alertify .ajs-footer { padding: 10px; }
    body .alertify .ajs-header::before,
    body .modal .modal-title::before { width: 50px; height: 30px; flex-basis: 50px; }
    body .swal2-popup:not(.swal2-toast) .swal2-title { font-size: 20px; }
    body .modal .modal-footer { display: flex; flex-wrap: wrap; gap: 8px; }
    body .modal .modal-footer .btn { min-height: 42px; margin: 0; }
}