/* ==========================================================================
   🏦 BANK-STYLE GLOBAL UI OVERRIDE
   ทุก popup / modal / menu / dropdown ใช้ style เดียวกับหน้าโอนเงินธนาคาร
   ========================================================================== */

/* ──────────────────────────────────────────────
   CSS VARIABLES (Bank Transfer Design Tokens)
   ────────────────────────────────────────────── */
:root {
    --bank-bg-modal:     #090a0f;                      /* พื้นหลัง modal/popup */
    --bank-bg-inner:     #07080c;                      /* พื้นหลัง inner card */
    --bank-bg-input:     #0c0d14;                      /* พื้นหลัง input */
    --bank-bg-pill:      #141520;                      /* พื้นหลัง pill/badge/ปุ่มรอง */
    --bank-border:       rgba(106,128,160,0.30);        /* border หลัก */
    --bank-border-inner: rgba(255,255,255,0.06);        /* border ข้างใน */
    --bank-border-input: rgba(255,255,255,0.07);        /* border input */
    --bank-shadow:       0 20px 60px rgba(0,0,0,0.80), 0 0 30px rgba(106,128,160,0.10); /* shadow */
    --bank-shadow-sm:    0 8px 30px rgba(0,0,0,0.70);  /* shadow เล็ก */
    --bank-radius:       18px;                         /* border-radius หลัก */
    --bank-radius-sm:    12px;                         /* border-radius เล็ก */
    --bank-radius-xs:    8px;                          /* border-radius เล็กสุด */
    --bank-text:         #ffffff;                      /* ตัวอักษรหลัก */
    --bank-text-dim:     #cbd5e1;                      /* ตัวอักษรรอง */
    --bank-text-muted:   #94a3b8;                      /* ตัวอักษร muted */
    --bank-btn-primary:  linear-gradient(135deg,#0047cc 0%,#0077ff 60%,#00b4ff 100%);
    --bank-btn-shadow:   0 2px 16px rgba(0,120,255,0.45);
}

/* ══════════════════════════════════════════════
   1. BOOTSTRAP MODAL (ทุก modal ในระบบ)
   ══════════════════════════════════════════════ */
.modal-content {
    background: var(--bank-bg-modal) !important;
    border: 1px solid var(--bank-border) !important;
    border-radius: var(--bank-radius) !important;
    box-shadow: var(--bank-shadow) !important;
    overflow: hidden !important;
}

.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--bank-border-inner) !important;
    padding: 1rem 1.25rem !important;
}

.modal-header .modal-title {
    color: var(--bank-text) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.modal-body {
    background: transparent !important;
    color: var(--bank-text) !important;
    padding: 1.25rem !important;
}

.modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--bank-border-inner) !important;
    padding: 1rem 1.25rem !important;
    gap: 0.5rem;
}

/* ── Admin Inner Card Modals ── */
.modal-content.admin-inner-card,
.admin-inner-card {
    background: var(--bank-bg-modal) !important;
    border: 1px solid var(--bank-border) !important;
    box-shadow: var(--bank-shadow) !important;
    border-radius: var(--bank-radius) !important;
}

/* ── Inner sub-card sections ── */
.modal-body .p-3.rounded-3,
.modal-body .p-4.rounded-4,
.modal-body .p-3.rounded-4,
.modal-body .p-2.rounded-3 {
    background: var(--bank-bg-inner) !important;
    border-color: var(--bank-border-inner) !important;
}

/* ══════════════════════════════════════════════
   2. SWEETALERT2 POPUP (ทุก Swal.fire())
   ══════════════════════════════════════════════ */
.swal2-popup:not(.swal2-toast) {
    background: var(--bank-bg-modal) !important;
    background-color: var(--bank-bg-modal) !important;
    border: 1px solid var(--bank-border) !important;
    border-radius: var(--bank-radius) !important;
    box-shadow: var(--bank-shadow) !important;
    color: var(--bank-text) !important;
    font-family: inherit !important;
    padding: 2rem 1.75rem !important;
}

.swal2-popup:not(.swal2-toast) .swal2-title {
    color: var(--bank-text) !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    letter-spacing: 0 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-html-container,
.swal2-popup:not(.swal2-toast) .swal2-content {
    color: var(--bank-text-dim) !important;
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-input,
.swal2-popup:not(.swal2-toast) .swal2-textarea,
.swal2-popup:not(.swal2-toast) .swal2-select {
    background: var(--bank-bg-input) !important;
    border: 1px solid var(--bank-border-input) !important;
    color: var(--bank-text) !important;
    border-radius: var(--bank-radius-xs) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-input:focus,
.swal2-popup:not(.swal2-toast) .swal2-textarea:focus {
    border-color: rgba(0,120,255,0.5) !important;
    box-shadow: 0 0 0 3px rgba(0,120,255,0.15) !important;
    outline: none !important;
}

/* Swal confirm button */
.swal2-popup:not(.swal2-toast) .swal2-confirm {
    background: var(--bank-btn-primary) !important;
    border: none !important;
    border-radius: var(--bank-radius-xs) !important;
    font-weight: 700 !important;
    padding: 0.65rem 1.5rem !important;
    box-shadow: var(--bank-btn-shadow) !important;
    color: #ffffff !important;
}

.swal2-popup:not(.swal2-toast) .swal2-cancel {
    background: var(--bank-bg-pill) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--bank-text-dim) !important;
    border-radius: var(--bank-radius-xs) !important;
    font-weight: 600 !important;
    padding: 0.65rem 1.5rem !important;
}

.swal2-popup:not(.swal2-toast) .swal2-deny {
    background: rgba(239,68,68,0.15) !important;
    border: 1px solid rgba(239,68,68,0.35) !important;
    color: #f87171 !important;
    border-radius: var(--bank-radius-xs) !important;
    font-weight: 700 !important;
}

/* Swal close button */
.swal2-popup .swal2-close {
    color: var(--bank-text-muted) !important;
}
.swal2-popup .swal2-close:hover {
    color: var(--bank-text) !important;
}

/* Swal backdrop */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ── Toast Notification ── */
.swal2-popup.swal2-toast {
    background: var(--bank-bg-modal) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-left-width: 4px !important;
    border-radius: var(--bank-radius-sm) !important;
    box-shadow: var(--bank-shadow-sm) !important;
    color: var(--bank-text) !important;
}
.swal2-popup.swal2-toast .swal2-title { color: var(--bank-text) !important; }
.swal2-popup.swal2-toast.swal2-icon-success { border-left-color: #22c55e !important; }
.swal2-popup.swal2-toast.swal2-icon-error   { border-left-color: #ef4444 !important; }
.swal2-popup.swal2-toast.swal2-icon-warning { border-left-color: #f59e0b !important; }
.swal2-popup.swal2-toast.swal2-icon-info    { border-left-color: #3b82f6 !important; }

/* ══════════════════════════════════════════════
   3. DROPDOWN MENU
   ══════════════════════════════════════════════ */
.dropdown-menu {
    background: var(--bank-bg-modal) !important;
    border: 1px solid var(--bank-border) !important;
    border-radius: var(--bank-radius-sm) !important;
    box-shadow: var(--bank-shadow-sm) !important;
    padding: 0.4rem !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.dropdown-item {
    color: var(--bank-text-dim) !important;
    border-radius: var(--bank-radius-xs) !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(255,255,255,0.06) !important;
    color: var(--bank-text) !important;
    transform: translateX(2px);
}

.dropdown-divider {
    border-color: var(--bank-border-inner) !important;
    margin: 0.35rem 0 !important;
}

/* ══════════════════════════════════════════════
   4. OFFCANVAS / MOBILE MENU DRAWER
   ══════════════════════════════════════════════ */
.offcanvas,
.offcanvas-end,
#mobileMenu,
.modern-mobile-drawer {
    background: var(--bank-bg-modal) !important;
    border-left: 1px solid var(--bank-border) !important;
    box-shadow: var(--bank-shadow) !important;
}

.modern-mobile-drawer.offcanvas-end {
    background: rgba(9,10,15,0.97) !important;
    border: 1px solid var(--bank-border) !important;
    box-shadow: var(--bank-shadow) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--bank-border-inner) !important;
    color: var(--bank-text) !important;
}

.offcanvas-title {
    color: var(--bank-text) !important;
    font-weight: 700 !important;
}

.offcanvas-body {
    color: var(--bank-text) !important;
}

/* Menu items inside offcanvas */
.offcanvas-body .list-group-item,
.offcanvas-body .nav-link,
#mobileMenu .list-group-item {
    background: transparent !important;
    border-color: var(--bank-border-inner) !important;
    color: var(--bank-text-dim) !important;
    border-radius: var(--bank-radius-xs) !important;
    transition: all 0.15s ease !important;
}

.offcanvas-body .list-group-item:hover,
.offcanvas-body .nav-link:hover,
#mobileMenu .list-group-item:hover {
    background: rgba(255,255,255,0.05) !important;
    color: var(--bank-text) !important;
    transform: translateX(3px) !important;
}

.offcanvas-body .list-group-item.active,
#mobileMenu .list-group-item.active {
    background: rgba(106,128,160,0.20) !important;
    border-color: rgba(106,128,160,0.45) !important;
    color: var(--bank-text) !important;
}

/* ══════════════════════════════════════════════
   5. FORM INPUTS ภายใน modal/popup/card
   ══════════════════════════════════════════════ */
.modal-body .form-control,
.modal-body .form-select,
.modal-body textarea,
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.admin-inner-card .form-control,
.admin-inner-card .form-select,
.admin-inner-card textarea,
.admin-content-card .form-control,
.admin-content-card .form-select,
.ranvyx-cat-card .form-control,
.ranvyx-cat-card .form-select,
.topup-box-card .form-control,
.topup-box-card .form-select {
    background: var(--bank-bg-input) !important;
    border: 1px solid var(--bank-border-input) !important;
    border-radius: var(--bank-radius-xs) !important;
    color: var(--bank-text) !important;
    padding: 0.6rem 0.9rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus,
.modal-body textarea:focus,
.admin-inner-card .form-control:focus,
.admin-inner-card .form-select:focus,
.admin-content-card .form-control:focus,
.admin-content-card .form-select:focus {
    border-color: rgba(0,120,255,0.50) !important;
    box-shadow: 0 0 0 3px rgba(0,120,255,0.12) !important;
    outline: none !important;
    background: #0e0f18 !important;
}

.modal-body .form-control::placeholder,
.modal-body textarea::placeholder,
.admin-inner-card .form-control::placeholder,
.admin-content-card .form-control::placeholder {
    color: var(--bank-text-muted) !important;
    opacity: 0.75 !important;
}

.modal-body .form-label,
.modal-body label,
.admin-inner-card .form-label,
.admin-inner-card label,
.admin-content-card .form-label {
    color: var(--bank-text-dim) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

/* Select options */
.modal-body .form-select option,
.admin-inner-card .form-select option,
.admin-content-card .form-select option {
    background: var(--bank-bg-modal) !important;
    color: var(--bank-text) !important;
}

/* ══════════════════════════════════════════════
   6. BUTTONS ภายใน modal/popup
   ══════════════════════════════════════════════ */

/* Primary / Save / Confirm button */
.modal-footer .btn-primary,
.modal-footer .btn-cyber-primary,
.modal-footer .btn-prod-buy-gold,
.btn-cyber-primary {
    background: var(--bank-btn-primary) !important;
    border: none !important;
    border-radius: var(--bank-radius-xs) !important;
    font-weight: 700 !important;
    box-shadow: var(--bank-btn-shadow) !important;
    color: #ffffff !important;
    transition: filter 0.15s ease, transform 0.15s ease !important;
}

.modal-footer .btn-primary:hover,
.modal-footer .btn-cyber-primary:hover,
.btn-cyber-primary:hover {
    filter: brightness(1.15) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 20px rgba(0,120,255,0.55) !important;
}

/* Secondary / Cancel button */
.modal-footer .btn-secondary,
.modal-footer .btn-dark,
.modal-body .btn-dark,
.modal-body .btn-secondary,
.modal-body .btn-sm.btn-dark {
    background: var(--bank-bg-pill) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--bank-text-dim) !important;
    border-radius: var(--bank-radius-xs) !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-dark:hover,
.modal-body .btn-dark:hover {
    background: rgba(255,255,255,0.08) !important;
    color: var(--bank-text) !important;
    border-color: rgba(255,255,255,0.18) !important;
}

/* Close button */
.modal-header .btn-close,
.btn-close-white {
    filter: invert(1) grayscale(1) opacity(0.6) !important;
    transition: opacity 0.15s ease !important;
}
.modal-header .btn-close:hover,
.btn-close-white:hover {
    filter: invert(1) grayscale(1) opacity(1) !important;
}

/* ══════════════════════════════════════════════
   7. INNER INFO/DETAIL BOXES (bank account box style)
   ══════════════════════════════════════════════ */

/* Sub-card box (เหมือน bank account box) */
.modal-body .info-box,
.modal-body .detail-box,
.modal-body .bank-box,
.modal-body .rounded-3.border,
.modal-body .rounded-4.border,
.modal-body [style*="background:#07"],
.modal-body [style*="background: #07"],
.modal-body [style*="background:#0c0"],
.admin-inner-card .rounded-3.border,
.admin-inner-card .rounded-4.border {
    border-color: var(--bank-border-inner) !important;
}

/* Badge/pill label (เหมือน badge บัญชีรับโอน) */
.modal-body .badge,
.admin-inner-card .badge {
    font-weight: 600 !important;
}

/* Admin label */
.admin-label {
    color: var(--bank-text-dim) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Admin input (ใช้ใน backend forms) */
.admin-input {
    background: var(--bank-bg-input) !important;
    border: 1px solid var(--bank-border-input) !important;
    border-radius: var(--bank-radius-xs) !important;
    color: var(--bank-text) !important;
    padding: 0.6rem 0.9rem !important;
}
.admin-input:focus {
    border-color: rgba(0,120,255,0.5) !important;
    box-shadow: 0 0 0 3px rgba(0,120,255,0.12) !important;
    outline: none !important;
    background: #0e0f18 !important;
}

/* ══════════════════════════════════════════════
   8. ADMIN SIDEBAR & CONTENT CARDS
   ══════════════════════════════════════════════ */
.admin-sidebar {
    background: var(--bank-bg-modal) !important;
    border: 1px solid var(--bank-border) !important;
    border-radius: var(--bank-radius) !important;
    box-shadow: var(--bank-shadow-sm) !important;
}

.admin-content-card {
    background: var(--bank-bg-modal) !important;
    border: 1px solid var(--bank-border) !important;
    border-radius: var(--bank-radius) !important;
    box-shadow: var(--bank-shadow-sm) !important;
}

.admin-sidebar-header {
    border-bottom: 1px solid var(--bank-border-inner) !important;
}

.admin-sidebar .list-group-item {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--bank-text-muted) !important;
    border-radius: var(--bank-radius-xs) !important;
    transition: all 0.15s ease !important;
}

.admin-sidebar .list-group-item:hover {
    background: rgba(255,255,255,0.04) !important;
    color: var(--bank-text) !important;
    transform: translateX(3px) !important;
    border-color: transparent !important;
}

.admin-sidebar .list-group-item.active {
    background: rgba(106,128,160,0.22) !important;
    border-color: rgba(106,128,160,0.50) !important;
    color: var(--bank-text) !important;
    box-shadow: 0 0 12px rgba(106,128,160,0.20) !important;
}

/* ══════════════════════════════════════════════
   9. TABLE ภายใน modal/admin
   ══════════════════════════════════════════════ */
.modal-body .table,
.admin-inner-card .table,
.admin-content-card .table,
.admin-table {
    color: var(--bank-text) !important;
    border-color: var(--bank-border-inner) !important;
}

.modal-body .table th,
.admin-inner-card .table th,
.admin-content-card .table th,
.admin-table th {
    background: rgba(255,255,255,0.03) !important;
    color: var(--bank-text-muted) !important;
    border-bottom: 1px solid var(--bank-border) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    padding: 0.65rem 0.85rem !important;
}

.modal-body .table td,
.admin-inner-card .table td,
.admin-content-card .table td,
.admin-table td {
    border-color: var(--bank-border-inner) !important;
    color: var(--bank-text-dim) !important;
    vertical-align: middle !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.88rem !important;
}

.modal-body .table tbody tr:hover,
.admin-inner-card .table tbody tr:hover,
.admin-content-card .table tbody tr:hover,
.admin-table tbody tr:hover {
    background: rgba(255,255,255,0.025) !important;
}

/* ══════════════════════════════════════════════
   10. SCROLLBAR (ใน modal/offcanvas)
   ══════════════════════════════════════════════ */
.modal-body::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar,
.swal2-html-container::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}
.modal-body::-webkit-scrollbar-thumb,
.offcanvas-body::-webkit-scrollbar-thumb {
    background: rgba(106,128,160,0.35) !important;
    border-radius: 4px !important;
}
.modal-body::-webkit-scrollbar-track,
.offcanvas-body::-webkit-scrollbar-track {
    background: transparent !important;
}

/* ══════════════════════════════════════════════
   11. BACKDROP
   ══════════════════════════════════════════════ */
.modal-backdrop.show {
    background: rgba(0,0,0,0.72) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    opacity: 1 !important;
}
.offcanvas-backdrop {
    background: rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════
   12. FRONTEND CARDS (topup, product, ranvyx)
   ══════════════════════════════════════════════ */
.ranvyx-cat-card {
    background: var(--bank-bg-modal) !important;
    border: 1px solid var(--bank-border) !important;
    box-shadow: var(--bank-shadow) !important;
}

.topup-box-card {
    background: var(--bank-bg-modal) !important;
    border: 1px solid var(--bank-border) !important;
    box-shadow: var(--bank-shadow-sm) !important;
}

/* ══════════════════════════════════════════════
   13. MOBILE RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .modal-content {
        border-radius: 14px !important;
    }
    .swal2-popup:not(.swal2-toast) {
        width: calc(100% - 24px) !important;
        border-radius: 16px !important;
        padding: 1.25rem !important;
    }
    .dropdown-menu {
        border-radius: 12px !important;
    }
    .modern-mobile-drawer.offcanvas-end {
        border-radius: 20px !important;
    }
}


/* ==========================================================================
   MK STORE — SITEWIDE TYPOGRAPHY + RESPONSIVE SAFETY (2026-09-26)
   Uses the original Kanit / Prompt stack across frontend + backend.
   ========================================================================== */
:root {
    --mk-site-font: 'Kanit', 'Prompt', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-main: var(--mk-site-font);
    --font-cyber: var(--mk-site-font);
    --font-mono: var(--mk-site-font);
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, span, a, label, small, strong, b, em,
button, input, select, textarea, option, optgroup,
.btn, .form-control, .form-select, .input-group-text,
.dropdown-menu, .dropdown-item, .nav-link, .badge, .alert,
.modal, .offcanvas, .swal2-popup,
table, thead, tbody, tfoot, tr, th, td,
code, pre, kbd, samp, .font-monospace, .text-monospace {
    font-family: var(--mk-site-font) !important;
}

/* Force every text-bearing element to the same family while preserving icon fonts. */
body *:not(i):not(svg):not(path) {
    font-family: var(--mk-site-font) !important;
    font-synthesis: none;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body *,
body *::before,
body *::after {
    box-sizing: border-box;
}

main, section, article, aside, nav, header, footer,
.container, .container-fluid, .row, [class*="col-"],
.card, .admin-content-card, .admin-inner-card,
.modal-dialog, .modal-content, .modal-header, .modal-body, .modal-footer,
.offcanvas, .dropdown-menu, .tab-content, .tab-pane,
.list-group, .list-group-item, .input-group, .btn-group {
    min-width: 0;
    max-width: 100%;
}

img, video {
    max-width: 100%;
    height: auto;
}

svg, canvas, iframe {
    max-width: 100%;
}

.d-flex > *,
.row > *,
.modal-header > *,
.modal-footer > * {
    min-width: 0;
}

.btn,
button,
.form-control,
.form-select,
textarea,
.badge,
.alert,
.dropdown-item,
.nav-link {
    max-width: 100%;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.modal-title,
.card-title,
.dropdown-item,
.alert,
label,
p {
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    .dropdown-menu {
        max-width: calc(100vw - 16px) !important;
    }

    .btn:not(.btn-close),
    button:not(.btn-close) {
        overflow-wrap: anywhere;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }
}


/* MK STORE FONT UNIFICATION v19 */
/* One typography source for all frontend/backend text. Icon glyph families are intentionally excluded. */
:root {
    --font-main: var(--mk-site-font);
    --font-cyber: var(--mk-site-font);
    --font-mono: var(--mk-site-font);
}
html body,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body span, html body a, html body label, html body small,
html body strong, html body b, html body em, html body div,
html body button, html body input, html body select, html body textarea, html body option, html body optgroup,
html body table, html body thead, html body tbody, html body tfoot, html body tr, html body th, html body td,
html body code, html body pre, html body kbd, html body samp,
html body .btn, html body .form-control, html body .form-select, html body .input-group-text,
html body .dropdown-menu, html body .dropdown-item, html body .nav-link, html body .badge, html body .alert,
html body .modal, html body .offcanvas, html body .swal2-popup, html body .swal2-container {
    font-family: var(--mk-site-font) !important;
}
/* Font Awesome must retain its own font family or icons become square/missing glyphs. */
html body i.fa, html body i.fas, html body i.far, html body i.fal, html body i.fab,
html body .fa-solid, html body .fa-regular, html body .fa-brands,
html body [class^="fa-"], html body [class*=" fa-"] {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}
html body .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}