/* Charcoal palette sampled from the supplied reference (#141414). */
:root {
  color-scheme: dark;
  --bg-page: #141414;
  --bg-container: #141414;
  --bg-header: #1b1b1b;
  --bg-card: #1e1e1e;
  --bg-card-hover: #252525;
  --bg-input: #262626;
  --bg-input-hover: #2c2c2c;
  --bg-modal: #202020;
  --bg-dropdown: #242424;
  --bs-body-bg: #141414 !important;
  --bs-body-bg-rgb: 20, 20, 20 !important;
  --surface: #1e1e1e;
  --surface-raised: #262626;
  --bg: #141414;
  --bg-deep: #141414;
  --header-bg: #1b1b1b;
  --panel: #1e1e1e;
  --panel-2: #262626;
  --store-card: #1e1e1e;
  --store-card-hover: #252525;
  --store-input-bg: #262626;
}
html, body, body.admin-page {
  background: #141414 !important;
  background-color: #141414 !important;
}
/* Customer pages use a black canvas; preserve the administrator palette. */
html:has(> body:not(.admin-page)), body:not(.admin-page) {
  background: #000 !important;
  background-color: #000 !important;
}
body:not(.admin-page) {
  --bg-page: #000;
  --bg-container: #000;
  --bs-body-bg: #000 !important;
  --bs-body-bg-rgb: 0, 0, 0 !important;
  --bg: #000;
  --bg-deep: #000;
}
.navbar, .navbar-wrapper, .admin-sidebar, .admin-topline {
  background: #1b1b1b !important;
}
/* A restrained red tint for the customer header at every screen size. */
.navbar, .navbar-wrapper {
  background: #241b1c !important;
}
.product-card, .home-page .product-card,
.cart-card, .order-pay-card, .invoice-card, .topup-card,
.orders-table-card, .orders-filter-bar,
.support-instructions-box, .support-footer-box, .ticket-history-card,
.standalone-login-wrap.login-card,
.modal-card, .purchase-modal-card, .order-modal-card, .ticket-modal-box,
.order-product-card, .kpi-card, .method-card {
  background: #1e1e1e !important;
}
.product-card:hover, .home-page .product-card:hover, .ticket-history-card:hover {
  background: #252525 !important;
}
body:not(.admin-page) .standalone-login-wrap.login-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.mobile-drawer-menu, .user-drawer-menu, .cart-drawer,
.cart-drawer-header, .cart-drawer-footer,
.order-modal-header, .order-modal-tabs, .coins-modal-box {
  background: #202020 !important;
}
.search-box-wrapper, .category-dropdown-btn, .orders-status-select,
.summary-input, .support-input, .support-select, .support-textarea,
.order-id-input-wrap input, .form-input, .ticket-modal-reply-input,
.custom-amount-wrap, .dropdown-trigger-btn, .field-box,
.meta-box, .preset-pill, .view-all-coins-btn {
  background: #282828 !important;
}
.order-summary-strip, .support-tabs-row, .order-product-card,
.pop-coin-item, .coin-option-card {
  background: #252525 !important;
}
.pop-coin-item.selected, .coin-option-card.selected {
  background: #332326 !important;
}
.orders-store-table th { background: #292123 !important; }
.order-stock-view-code { background: #191919 !important; }
#orderInfoModal .order-modal-card { border-radius: 4px !important; }
#orderInfoModal .order-modal-close-btn {
  width: 36px;
  height: 36px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #bdbdbd;
  font-size: 28px;
  font-weight: 400;
}
#orderInfoModal .order-modal-close-btn:hover { color: #fff; }
.pending-invoice-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 10px;
  margin-bottom: 14px;
  background: #d80000;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
}
.pending-invoice-btn:hover { background: #b00000; }

/* Decorative favicon watermark, behind the customer-facing page content. */
body:not(.admin-page)::after {
  content: '';
  position: fixed;
  right: -150px;
  bottom: -140px;
  width: clamp(380px, 42vw, 640px);
  aspect-ratio: 1;
  background: url('/assets/face-logo.png') center / contain no-repeat;
  opacity: .095;
  filter: drop-shadow(0 0 28px rgba(216, 0, 0, .7))
          drop-shadow(0 0 70px rgba(216, 0, 0, .4));
  -webkit-mask-image: radial-gradient(ellipse at 62% 65%, #000 25%, rgba(0,0,0,.7) 60%, transparent 85%);
  mask-image: radial-gradient(ellipse at 62% 65%, #000 25%, rgba(0,0,0,.7) 60%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}
.deposit-container, .order-pay-wrapper, .invoice-wrapper {
  position: relative;
  z-index: 1;
}
@media (max-width: 991.98px) {
  .orders-store-table tbody tr { background: #1e1e1e; }
  body:not(.admin-page)::after {
    width: 340px;
    right: -105px;
    bottom: -100px;
    opacity: .07;
  }
}

.site-message-dialog {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: auto;
  padding: 26px 52px 26px 24px;
  background: #242424;
  color: #fff;
  border: none !important;
  border-radius: 4px;
  box-shadow: none !important;
  font-family: 'Montserrat', sans-serif;
}
.site-message-dialog::backdrop { background: rgba(0,0,0,.65); }
.toast-container { max-width: min(380px, calc(100vw - 32px)); }
.toast-container .toast { overflow-wrap: anywhere; font-weight: 500; }
.site-message-dialog h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.site-message-dialog p { margin: 0; font-size: 13px; font-weight: 400; color: #d4d4d4; line-height: 1.7; overflow-wrap: anywhere; }
.site-message-dialog .site-message-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  color: #bdbdbd;
  font-family: inherit;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.site-message-dialog .site-message-close:hover { color: #fff; }
.site-message-dialog .site-message-close:focus-visible { outline: 1px solid #ed7777 !important; outline-offset: -5px; }