/*
 * remitza v4 theme: dialogs, toasts and other layers in both apps (Part 2 spec section 8). The last shared file, so dialog
 * rules win ties with forms.css. Layers appended to <body> (layer, SweetAlert2, toastr) are never scoped under .content-body,
 * .dcat-box or #app. Dcat's z-order stays (spec 5.7); only the customer site's WhatsApp button moves down.
 */

/* ---------- 8.1 Shared: motion, glyphs and links ---------- */
@keyframes rz-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rz-dialog-out { to { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes rz-toast-in { from { transform: translateX(18px) scale(.97); } to { transform: none; } }
@keyframes rz-fade-in { from { opacity: 0; } }
@keyframes rz-spin { to { transform: rotate(360deg); } }

/* Glyphs come from feather (vendors.min.css, loaded on every page), drawn on pseudo-elements so they follow the tokens */
body.rz-theme .modal .modal-header .close::before,
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-setwin a::before,
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-setwin .layui-layer-min cite::before,
body.rz-theme .layui-layer .layui-layer-setwin .layui-layer-close2::before,
body.rz-theme .swal2-popup .swal2-icon::before,
body.rz-theme #toast-container > .toast::before,
body.rz-theme #fullscreenOverlay > .close-button::before {
    font-family: feather;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

/* Part 1's link colour covers .content-body only, so links in layers would stay Dcat orange (1.95:1 on white) */
body.rz-theme :is(.modal-content, .layui-layer-content, .swal2-content) a:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link) {
    color: var(--brand-text);
}

/* ---------- 8.2 Bootstrap dialogs (Widgets\Modal: the portal row actions and the customer profile dialogs) ---------- */
body.rz-theme .modal .modal-dialog .modal-content {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background-color: var(--card);
    box-shadow: var(--shadow-2xl);
}
body.rz-theme .modal .modal-content .modal-header {
    position: relative;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background-color: var(--paper-2);
}
body.rz-theme .modal .modal-content .modal-header::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--brand); }
body.rz-theme .modal .modal-header .modal-title {
    margin: 0;
    padding-right: 40px;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.375;
    letter-spacing: -0.025em;
}
body.rz-theme .modal .modal-header .close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    float: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background-color: var(--background);
    color: var(--text-2);
    opacity: 1;
    text-shadow: none;
    transition: background-color 150ms, color 150ms;
}
body.rz-theme .modal .modal-header .close > span { display: none; }
body.rz-theme .modal .modal-header .close::before { content: "\e8f6"; font-size: 16px; }
body.rz-theme .modal .modal-header .close:hover { background-color: var(--hover); color: var(--foreground); }
body.rz-theme .modal .modal-header .close:focus { outline: 0; }
body.rz-theme .modal .modal-header .close:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
body.rz-theme .modal .modal-content .modal-body { padding: 16px 20px; background-color: transparent; }
/* The lazy-loaded widget form's footer becomes the dialog footer, with Submit at the bottom right (v4 BlacklistCreateDialog) */
body.rz-theme .modal .modal-body .box-footer {
    margin: 12px -20px -16px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background-color: var(--card);
}
body.rz-theme .modal .modal-body .box-footer > .col-md-2 { flex: 0 0 0; max-width: 0; padding: 0; overflow: hidden; }
body.rz-theme .modal .modal-body .box-footer > .col-md-2 + .col-md-8 { flex: 1 1 auto; max-width: 100%; padding: 0; } /* (0,6,1) beats forms.css's (0,5,2) */
body.rz-theme .modal .modal-content .modal-footer { gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background-color: var(--card); }
body.rz-theme .modal .modal-content .modal-footer > * { margin: 0; }
body.rz-theme .modal-backdrop.fade { background-color: var(--scrim-strong); opacity: 0; transition: opacity 220ms var(--ease-spay-out); }
body.rz-theme .modal-backdrop.fade.show { opacity: 1; } /* the scrim colour carries the alpha */
body.rz-theme .modal.fade { transition: opacity 220ms var(--ease-spay-out); }
body.rz-theme .modal.fade .modal-dialog { transform: translateY(8px) scale(.96); transition: transform 220ms var(--ease-spay-out); }
body.rz-theme .modal.fade.show .modal-dialog { transform: none; }

@media (max-width: 575.98px) {
    body.rz-theme .modal-dialog { margin: 16px; }
}

/* ---------- 8.3 layer dialogs: DialogForm, DialogTree, the customer Terms and QR tutorial. layer.css arrives last but tops out
   at (0,2,0); Dcat's layer rules (dcat-app-primary.css:2103-2183, dark :3658-3696) are !important, so those properties are too. */
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) {
    overflow: hidden !important; /* layer writes an inline overflow: visible when a window is restored */
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background-color: var(--card) !important; /* Dcat's own dark .layui-layer background (0,2,1) is !important */
    box-shadow: var(--shadow-2xl) !important; /* dcat-app-primary.css:2103-2105 .layui-layer shadow is !important */
}
/* Keyed without .layer-anim: layer.js's open clean-up (jQuery .one() over five event names) strips .layer-anim on the next
   animationend that reaches the layer, which can be the close animation's own end, 50ms before the node goes; a rule that
   needed .layer-anim then let layer.css's .layer-anim-close bounce restart at full opacity, a flash before the close */
body.rz-theme .layui-layer.layer-anim-00 { animation: rz-dialog-in 220ms var(--ease-spay-out) both; }
body.rz-theme .layui-layer.layer-anim-close { animation: rz-dialog-out 150ms var(--ease-spay) both; } /* layer removes the node after 200ms */
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-title {
    position: relative;
    height: 56px !important; /* Dcat's title rule (dcat-app-primary.css:2107-2117) is !important throughout */
    padding: 0 132px 0 20px; /* room for three 32px window buttons */
    border-bottom: 1px solid var(--border) !important; /* the same Dcat rule; its dark twin is !important too */
    border-radius: 0 !important; /* the same Dcat rule */
    background-color: var(--paper-2) !important; /* the same Dcat rule and its dark twin */
    color: var(--foreground) !important; /* Dcat's dark title colour is !important */
    font-family: var(--font-heading);
    font-size: 17px !important; /* the same Dcat rule */
    font-weight: 600;
    line-height: 56px !important; /* the same Dcat rule */
    letter-spacing: -0.025em;
    text-transform: none;
}
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-title::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--brand);
}
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg):has(.layui-layer-maxmin) .layui-layer-title { padding-right: 88px; } /* min or max: two buttons left */
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-setwin { top: 12px; right: 12px; display: flex; align-items: center; gap: 6px; }
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-setwin a {
    position: relative;
    top: 0;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 !important; /* dcat-app-primary.css:2152-2154 gives .layui-layer-close1 an !important margin-left */
    border-radius: 9px;
    color: var(--text-2);
    transition: background-color 150ms, color 150ms;
}
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-setwin a.layui-layer-close1 {
    border: 1px solid var(--border);
    background-color: var(--background) !important; /* dcat-app-primary.css:2131-2134 .layui-layer-ico { background: transparent !important } */
}
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-setwin a:hover {
    background-color: var(--hover) !important; /* the same .layui-layer-ico rule */
    color: var(--foreground);
    opacity: 1; /* layer.css fades .layui-layer-close1:hover to .7 (0,3,0); only the fill and the glyph colour change */
}
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-setwin a::before,
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-setwin .layui-layer-min cite::before {
    color: inherit !important; /* Dcat's own dark glyph colours, (0,3,2) and (0,3,3), are !important */
    font-size: 16px;
}
/* layer.css gives the minimize bar a 14x2px box and the glyph hangs from its top; with no box, the grid centres the glyph like the other two */
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-setwin .layui-layer-min cite { display: contents; }
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-content {
    padding: 0; /* layer sizes the content as inner height - title - buttons - 2 x padding-top, so spacing goes inside */
    background-color: var(--card) !important; /* Dcat's own dark content background (0,3,1) is !important */
    color: var(--foreground);
    font-size: 13px;
    line-height: 1.5;
    scrollbar-color: var(--text-3) transparent;
    scrollbar-width: thin;
}
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-content::-webkit-scrollbar-track { background-color: transparent; }
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-content::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 9999px;
    background-color: var(--text-3);
    background-clip: padding-box;
}
/* DialogForm: Dcat drops the form card for dialog requests (Widgets/DialogForm.php prepare() unwraps the form), so the padding
   goes on the box-body inside section.form-content (layouts/form-content.blade.php:12); the .card rows cover wrapped forms */
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-content > .card {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-content > .card .box-body,
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-content > .form-content .box-body {
    margin-top: 0 !important; /* form/container.blade.php:7 writes an inline margin-top */
    padding: 16px 20px;
}
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-content > :is(.p-2, .p-3) {
    padding: 16px 20px !important; /* the Terms and QR tutorial wrappers; .p-2 and .p-3 are !important */
    line-height: 1.625;
}
body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-btn {
    display: flex;
    flex-direction: row-reverse; /* DialogForm's [Submit, Reset] read Reset then Submit, Submit on the right (v4) */
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background-color: var(--card) !important; /* Dcat's own dark .layui-layer-btn background (0,3,1) is !important */
}
body.rz-theme .layui-layer .layui-layer-btn a {
    display: inline-flex;
    align-items: center;
    height: 39px !important; /* dcat-app-primary.css:2166-2173 sets height, line-height and padding !important */
    margin: 0;
    padding: 0 16px !important; /* the same Dcat rule */
    border-radius: var(--radius-md);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1 !important; /* the same Dcat rule */
}
body.rz-theme .layui-layer .layui-layer-btn a:hover { opacity: 1; }
body.rz-theme .layui-layer .layui-layer-btn a.layui-layer-btn0 {
    border-color: var(--brand) !important; /* dcat-app-primary.css:2175-2179 .layui-layer-btn0 colours are !important */
    background-color: var(--brand) !important; /* the same Dcat rule */
    color: var(--brand-ink) !important; /* the same Dcat rule */
}
body.rz-theme .layui-layer .layui-layer-btn a.layui-layer-btn0:hover {
    border-color: var(--brand-hover) !important; /* the rule above is !important */
    background-color: var(--brand-hover) !important; /* the rule above is !important */
}
body.rz-theme .layui-layer .layui-layer-btn a.layui-layer-btn1 {
    border: 1px solid;
    border-color: var(--border) !important; /* .layui-layer-btn a border colour and Dcat's dark .layui-layer-btn1 are !important */
    background-color: var(--card) !important; /* Dcat's dark .layui-layer-btn1 background is !important */
    color: var(--text-2);
}
body.rz-theme .layui-layer .layui-layer-btn a.layui-layer-btn1:hover {
    background-color: var(--hover) !important; /* the rule above is !important */
    color: var(--foreground);
}

/* ---------- 8.4 Image preview (Dcat.helpers.previewImage: a page layer with .layui-layer-nobg) and layer scrims ---------- */
body.rz-theme .layui-layer.layui-layer-nobg {
    border-radius: var(--radius);
    background-color: transparent !important; /* Dcat's own dark .layui-layer background (0,2,1) is !important */
    box-shadow: var(--shadow-2xl) !important; /* dcat-app-primary.css:2103-2105 */
}
body.rz-theme .layui-layer.layui-layer-nobg .layui-layer-content > img { display: block; border-radius: var(--radius); }
/* close2 is invisible today: Dcat drops layer's sprite (.layui-layer-ico) and draws nothing in its place */
body.rz-theme .layui-layer .layui-layer-setwin .layui-layer-close2 {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background-color: var(--card) !important; /* dcat-app-primary.css:2131-2134 .layui-layer-ico { background: transparent !important } */
    box-shadow: var(--shadow-lg);
    color: var(--text-2);
}
body.rz-theme .layui-layer .layui-layer-setwin .layui-layer-close2::before { content: "\e8f6"; font-size: 16px; }
body.rz-theme .layui-layer .layui-layer-setwin .layui-layer-close2:hover {
    background-color: var(--hover) !important; /* the rule above is !important */
    color: var(--foreground);
}
body.rz-theme .layui-layer-shade:not(.dcat-loading) {
    background-color: var(--scrim-strong) !important; /* layer.js writes the scrim colour inline */
    opacity: 1 !important; /* layer.js writes opacity inline; the scrim colour carries the alpha */
}

/* ---------- 8.5 SweetAlert2 v8.11.8: Dcat.confirm in both apps and every customer-site message (v4 StatusDialog) ----------
   v8 toggles display inline on the popup, icon, title, content and actions, so nothing here sets it; closing waits for the
   popup's own animationend, so the hide rule is a real animation (reduced motion shortens it, base.css). */
body.rz-theme .swal2-container { padding: 16px; }
body.rz-theme .swal2-container.swal2-shown { background-color: var(--scrim-strong); }
body.rz-theme .swal2-container.swal2-fade { transition: background-color 220ms var(--ease-spay-out); }
body.rz-theme .swal2-container .swal2-popup {
    width: 440px;
    padding: 24px 24px 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--card);
    box-shadow: var(--shadow-2xl);
    font-size: 13px;
}
body.rz-theme .swal2-popup.swal2-show:not(.swal2-noanimation) { animation: rz-dialog-in 220ms var(--ease-spay-out); }
body.rz-theme .swal2-popup.swal2-hide:not(.swal2-noanimation) { animation: rz-dialog-out 150ms var(--ease-spay) forwards; }
body.rz-theme .swal2-popup .swal2-icon {
    position: absolute;
    top: 24px;
    left: 24px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 0;
    border-radius: var(--radius);
    line-height: 1;
    animation: none;
}
body.rz-theme .swal2-popup .swal2-icon > * { display: none; } /* v8's drawn cross, ring and tick lines */
body.rz-theme .swal2-popup .swal2-icon::before { display: block; height: auto; font-size: 22px; }
body.rz-theme .swal2-popup .swal2-icon.swal2-error { background-color: var(--err-bg); color: var(--err-mark); }
body.rz-theme .swal2-popup .swal2-icon.swal2-error::before { content: "\e8f7"; }
body.rz-theme .swal2-popup .swal2-icon.swal2-success { background-color: var(--ok-bg); color: var(--ok-mark); }
body.rz-theme .swal2-popup .swal2-icon.swal2-success::before { content: "\e83e"; }
body.rz-theme .swal2-popup .swal2-icon.swal2-warning { background-color: var(--warn-bg); color: var(--warn-mark); }
body.rz-theme .swal2-popup .swal2-icon.swal2-warning::before { content: "\e81e"; }
body.rz-theme .swal2-popup .swal2-icon.swal2-info { background-color: var(--info-bg); color: var(--info-mark); }
body.rz-theme .swal2-popup .swal2-icon.swal2-info::before { content: "\e87f"; }
body.rz-theme .swal2-popup .swal2-icon.swal2-question { background-color: var(--secondary); color: var(--text-2); }
body.rz-theme .swal2-popup .swal2-icon.swal2-question::before { content: "\e903"; }
body.rz-theme .swal2-popup .swal2-header { align-items: flex-start; padding-left: 58px; }
body.rz-theme .swal2-popup .swal2-title {
    margin: 0 0 6px;
    padding: 2px 0 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600 !important; /* dcat-app-primary.css:69-71 .swal2-title { font-weight: 400 !important } */
    line-height: 1.375;
    letter-spacing: -0.025em;
    text-align: left;
}
body.rz-theme .swal2-popup .swal2-content {
    margin: 0;
    padding: 0 0 0 58px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.625;
}
body.rz-theme .swal2-popup #swal2-content { text-align: left; }
body.rz-theme .swal2-popup:has(#swal2-content[style*="display: none"]) .swal2-header { min-height: 44px; } /* title only: as tall as the icon */
/* text only: the customer-site messages pass no title, and v8 hides the h2 inline */
body.rz-theme .swal2-popup:has(.swal2-title[style*="display: none"]) #swal2-content {
    min-height: 44px;
    padding-top: 11px;
    color: var(--foreground);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}
body.rz-theme .swal2-popup .swal2-actions {
    justify-content: flex-end;
    gap: 10px;
    width: calc(100% + 48px);
    margin: 20px -24px 0;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background-color: var(--paper-2);
}
body.rz-theme .swal2-popup .swal2-actions > button {
    min-width: 88px;
    margin: 0 !important; /* Dcat.confirm puts .ml-1 (!important) on Cancel */
}
body.rz-theme .swal2-popup .swal2-actions .swal2-cancel { order: -1; } /* Cancel then Confirm on the right, as in v4; DOM and tab order stay */
body.rz-theme .swal2-popup .swal2-actions .btn {
    height: 39px;
    padding: 0 16px !important; /* dcat-app-primary.css:73-75 .swal2-actions .btn padding is !important */
}
/* Dcat.confirm's Cancel (.btn-white) is the neutral outline; dark.css's .btn.btn-white rules are (0,4,1) and (0,5,1) */
body.rz-theme .swal2-popup .swal2-actions .btn.btn-white { border: 1px solid var(--border); background-color: var(--card); color: var(--text-2); }
body.rz-theme .swal2-popup .swal2-actions .btn.btn-white:hover {
    background-color: var(--hover);
    box-shadow: none !important; /* .btn-white:hover adds a shadow !important (dcat-app-primary.css:915-919) */
    color: var(--foreground) !important; /* dark.css .btn.btn-white:hover colour is !important (0,5,1) */
}
body.rz-theme .swal2-popup .swal2-actions .swal2-styled.swal2-confirm {
    height: 39px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--brand) !important; /* the customer site's confirmButtonColor writes the background inline */
    color: var(--brand-ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
}
body.rz-theme .swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:hover,
body.rz-theme .swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:active {
    background-color: var(--brand-hover) !important; /* the inline confirmButtonColor */
    background-image: none;
}
body.rz-theme .swal2-popup .swal2-actions button:focus { outline: 0; box-shadow: none; }
body.rz-theme .swal2-popup .swal2-actions button:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
body.rz-theme .swal2-popup .swal2-actions.swal2-loading .swal2-confirm::after {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    box-shadow: none;
}

/* ---------- 8.6 toastr (portal): moved to the bottom right in CSS; toastr.options, the 5s timing and z-index 999999 stay ----------
   Always #toast-container > .toast, never a bare .toast: Bootstrap and Vuexy style .toast too (opacity 0, display none). */
body.rz-theme #toast-container.toast-top-right {
    top: auto;
    right: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column-reverse; /* toastr inserts the newest first, so it lands nearest the corner */
    align-items: flex-end;
    gap: 10px;
    max-width: calc(100vw - 44px);
}
body.rz-theme #toast-container > .toast {
    position: relative;
    display: flex; /* beats Vuexy's .toast { display: none }; jQuery fadeIn keeps it */
    flex-direction: column;
    justify-content: center;
    width: auto;
    min-width: 248px;
    max-width: 360px;
    min-height: 54px;
    margin: 0;
    padding: 11px 15px 11px 54px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    background-image: none !important; /* toastr.css paints its PNG icons with background-image !important */
    box-shadow: var(--shadow-pop);
    color: var(--foreground);
    font-size: 13px;
    opacity: 1;
    backdrop-filter: none;
    animation: rz-toast-in 300ms var(--ease-spay-out) both; /* transform only: jQuery fades with an inline opacity */
}
body.rz-theme #toast-container > .toast:hover { box-shadow: var(--shadow-pop); }
body.rz-theme #toast-container > .toast::before {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: var(--radius-sm);
    font-size: 17px;
    line-height: 30px;
    text-align: center;
}
body.rz-theme #toast-container > .toast-success::before { content: "\e83f"; background-color: var(--ok-bg); color: var(--ok-mark); }
body.rz-theme #toast-container > .toast-error::before { content: "\e8f7"; background-color: var(--err-bg); color: var(--err-mark); }
body.rz-theme #toast-container > .toast-info::before { content: "\e87f"; background-color: var(--info-bg); color: var(--info-mark); }
body.rz-theme #toast-container > .toast-warning::before { content: "\e81e"; background-color: var(--warn-bg); color: var(--warn-mark); }
body.rz-theme #toast-container > .toast > .toast-message {
    color: var(--foreground);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
body.rz-theme #toast-container .toast-title { color: var(--foreground); font-size: 13px; font-weight: 600; line-height: 1.25; }
body.rz-theme #toast-container .toast-title + .toast-message { margin-top: 1px; color: var(--text-2); font-size: 11.5px; font-weight: 400; }
body.rz-theme #toast-container .toast-message a { color: var(--brand-text); }

/* ---------- 8.7 Full-screen media preview (admin/pages/previewMedia.blade.php); its single-class styles lose to the id ---------- */
body.rz-theme #fullscreenOverlay { background: var(--scrim-strong); animation: rz-fade-in 220ms var(--ease-spay-out); } /* replays on each display flip */
body.rz-theme #fullscreenOverlay .preview-container { max-width: 960px; margin: 0 auto; padding: 72px 16px 40px; animation: rz-dialog-in 220ms var(--ease-spay-out); }
body.rz-theme #fullscreenOverlay .preview-item {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background-color: var(--paper-2);
    box-shadow: var(--shadow-2xl);
}
body.rz-theme #fullscreenOverlay .fullscreen-image { display: block; max-width: 100%; margin: 0 auto; border-radius: var(--radius); }
body.rz-theme #fullscreenOverlay .preview-item iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); }
body.rz-theme #fullscreenOverlay > .close-button {
    border: 1px solid var(--border); /* the view keeps it fixed, 40px, 20px from the top and right */
    border-radius: var(--radius);
    background-color: var(--card);
    box-shadow: var(--shadow-lg);
    color: var(--foreground);
    font-size: 0; /* hides the text x; the glyph is drawn on ::before */
}
body.rz-theme #fullscreenOverlay > .close-button::before { content: "\e8f6"; font-size: 18px; }
body.rz-theme #fullscreenOverlay > .close-button:hover { background-color: var(--hover); }
body.rz-theme #fullscreenOverlay > .close-button:focus { outline: 0; }
body.rz-theme #fullscreenOverlay > .close-button:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }

/* ---------- 8.8 Dcat's loading box (lazy dialog content, $(el).loading(), Dcat.loading()): the v4 28px ring ---------- */
body.rz-theme .dcat-loading.pin > svg { display: none; }
body.rz-theme .dcat-loading.pin::after {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--text-2); /* 3:1 on the page, cards and scrims; v4's --text-3 is 2.6:1 */
    animation: rz-spin 1s linear infinite; /* the reduced-motion reset in base.css stops it */
}

/* ---------- 8.9 Layers keep Dcat's order (spec 5.7); only the customer site's WhatsApp button moves below the dialogs ---------- */
body.rz-theme.rz-app-frontend .extra-html > a[href^="https://api.whatsapp.com/"] {
    z-index: var(--rz-z-float) !important; /* app/Frontend/bootstrap.php writes an inline z-index: 10000 */
}

/* ---------- 8.14 Chinese pages: dialog titles drop the heading letter-spacing; nothing under 12px (spec 5.4) ---------- */
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .modal .modal-header .modal-title,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .layui-layer.layui-layer-page:not(.layui-layer-nobg) .layui-layer-title,
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .swal2-popup .swal2-title {
    letter-spacing: 0;
    text-transform: none;
}
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme #toast-container .toast-title + .toast-message {
    font-size: var(--rz-fs-label-cn);
    letter-spacing: 0;
    text-transform: none;
}