:root {
  /* General color definitions */
  --btcpay-brand-primary:  #0050ca;
  --btcpay-brand-secondary: #ee220d;
  --btcpay-brand-tertiary: #1e7a44;
  --btcpay-brand-dark: #0f3b21;

  /* Color definitions for specific purposes - map the general colors or define additional ones */
  --btcpay-color-white: #fff;
  --btcpay-color-black: #000;

  --btcpay-color-neutral-100: #f8f9fa;
  --btcpay-color-neutral-200: #e9ecef;
  --btcpay-color-neutral-300: #dee2e6;
  --btcpay-color-neutral-400: #ced4da;
  --btcpay-color-neutral-500: #8f979e;
  --btcpay-color-neutral-600: #6c757d;
  --btcpay-color-neutral-700: #495057;
  --btcpay-color-neutral-800: #343a40;
  --btcpay-color-neutral-900: #292929;

  --btcpay-color-primary: var(--btcpay-brand-primary);
  --btcpay-color-primary-accent: var(--btcpay-brand-tertiary);
  --btcpay-color-primary-backdrop: #d2e5cf;
  --btcpay-color-primary-text: var(--btcpay-color-neutral-900);
  --btcpay-color-secondary: var(--btcpay-color-neutral-500);
  --btcpay-color-secondary-accent: var(--btcpay-color-neutral-700);
  --btcpay-color-secondary-backdrop: var(--btcpay-color-neutral-400);
  --btcpay-color-secondary-text: var(--btcpay-color-neutral-700);
  --btcpay-color-success: #247e12;
  --btcpay-color-success-accent: var(--btcpay-brand-tertiary);
  --btcpay-color-success-backdrop: #389725;
  --btcpay-color-success-text: var(--btcpay-color-white);
  --btcpay-color-info: #17a2b8;
  --btcpay-color-info-accent: #117a8b;
  --btcpay-color-info-backdrop: #c8e7ed;
  --btcpay-color-info-text: var(--btcpay-color-info-accent);
  --btcpay-color-warning: #ffc107;
  --btcpay-color-warning-accent: #d39e00;
  --btcpay-color-warning-backdrop: #ffc107;
  --btcpay-color-warning-text: var(--btcpay-color-neutral-900);
  --btcpay-color-danger: #c12c1a;
  --btcpay-color-danger-accent: #a71705;
  --btcpay-color-danger-backdrop: #e85442;
  --btcpay-color-danger-text: var(--btcpay-color-white);
  --btcpay-color-light: var(--btcpay-color-neutral-200);
  --btcpay-color-light-accent: var(--btcpay-color-neutral-400);
  --btcpay-color-light-backdrop: var(--btcpay-color-neutral-200);
  --btcpay-color-light-text: var(--btcpay-color-neutral-800);
  --btcpay-color-dark: var(--btcpay-color-neutral-800);
  --btcpay-color-dark-accent: var(--btcpay-color-black);
  --btcpay-color-dark-backdrop: var(--btcpay-color-neutral-800);
  --btcpay-color-dark-text: var(--btcpay-color-neutral-200);

  /* Color definitions for specific sections - try to reuse colors defined above */
  --btcpay-body-bg: var(--btcpay-color-neutral-100);
  --btcpay-bg-dark: var(--btcpay-brand-dark);
  --btcpay-bg-tile: var(--btcpay-color-white);
  --btcpay-bg-cta: var(--btcpay-brand-dark);

  --btcpay-border-color-light: var(--btcpay-color-neutral-200);
  --btcpay-border-color-medium: var(--btcpay-color-neutral-300);

  --btcpay-body-color: var(--btcpay-color-neutral-900);
  --btcpay-body-color-link: var(--btcpay-color-primary);
  --btcpay-body-color-link-accent: var(--btcpay-color-primary);

  --btcpay-header-bg: var(--btcpay-color-white);
  --btcpay-header-color: var(--btcpay-body-color);
  --btcpay-header-color-link: var(--btcpay-body-color);
  --btcpay-header-color-link-accent: var(--btcpay-body-color);

  --btcpay-footer-bg: var(--btcpay-brand-dark);
  --btcpay-footer-color: var(--btcpay-color-neutral-400);

  --btcpay-font-size-base: 14px;
  --btcpay-font-family-head: 'Open Sans', Helvetica, 'Helvetica Neue',
    sans-serif;
  --btcpay-font-family-base: 'Open Sans', Helvetica, 'Helvetica Neue',
    sans-serif;
  --btcpay-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  --btcpay-font-weight-normal: 400;
  --btcpay-font-weight-semibold: 600;
  --btcpay-font-weight-bold: 700;
}

body {
  font-family: 'Open Sans', Helvetica, 'Helvetica Neue', sans-serif;
}

/* Bootstrap modifications (admin back-office) */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
}

.bg-dark {
  background-color: var(--btcpay-bg-dark) !important;
}

.onion {
  filter: invert();
}

.table-sm {
  width: calc(100% + 1rem);
  margin: 1.5rem -0.5rem;
  border-radius: 4px;
  border-collapse: separate !important;
  border-spacing: 0px !important;
}

.table-sm thead > tr {
  height: 40px;
}

.table-sm thead th {
  border-bottom: 2px solid var(--btcpay-border-color-medium);
  border-top: none;
  font-size: 1rem;
  color: var(--btcpay-color-secondary);
  font-weight: var(--btcpay-font-weight-semibold);
}

.table-sm th,
.table-sm td {
  padding: 0.5rem;
}

.table-sm tbody tr:first-child td {
  border-top: none;
}

.list-group-item-action:hover,
.table-sm tbody tr:hover {
  background-color: var(--btcpay-color-white);
}

.removetopborder tr:first-child th,
.removetopborder tr:first-child td {
  border-top: none;
}

#mainNav {
  background: var(--btcpay-header-bg);
}

header.masthead::before,
.service-box img {
  filter: hue-rotate(318deg);
}

@media (min-width: 992px) {
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
    border-bottom-color: var(--btcpay-header-color-link-accent);
  }
}

/* ==========================================================================
   Custom CSS by STOKR — Checkout V2 (invoice modal)
   Rewritten for the current Vue-based checkout (the old rules below this
   point used to target Checkout V1 — #checkoutCtrl, .top-header,
   .payment-tabs, .line-items, .single-item-order, .action-button — none of
   which exist in V2, so they were dead. One of them (.text-muted) was also
   leaking a grey box onto every muted-text element site-wide; removed.
   All rules below are scoped under #Checkout so they can't leak into the
   back-office admin UI.
   ========================================================================== */

/* Unify header + card into one rounded, shadowed surface (only in modal
   mode — a directly-opened invoice page shouldn't float a drop shadow). */
.checkout-modal #Checkout.public-page-wrap {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 24px 60px 0px rgba(2, 17, 40, 0.4);
}

#Checkout main.tile {
  border-radius: 0;
  box-shadow: none;
}

/* Store header bar — requires "Show Store Header" enabled in the store's
   Checkout Appearance settings; this only styles it if it's rendered. */
#Checkout header.store-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 26px;
  background-color: #021128;
}

#Checkout header.store-header .store-name {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

/* Figma's header is text-only. Delete this rule if the store logo should
   still show next to the name. */
#Checkout header.store-header .store-logo {
  display: none;
}

/* Invoice amount */
#Checkout #AmountDue {
  font-size: 32px;
  font-weight: 700;
  color: #202020;
}

/* "Not paid in full" info box */
#Checkout #PaymentInfo.info {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 16px 18px;
  color: #202020;
}

#Checkout #PaymentInfo .payment-due {
  flex-direction: column;
  gap: 8px;
}

#Checkout #PaymentInfo .icon {
  --icon-size: 13px;
  color: #9cb9eb;
  border: 1.5px solid #9cb9eb;
  border-radius: 50%;
  box-sizing: content-box;
  padding: 4.5px;
}

#Checkout #PaymentInfo,
#Checkout #PaymentInfo .timer,
#Checkout #PaymentInfo .payment-due span {
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
}

/* "View Details" toggle */
#Checkout #DetailsToggle {
  padding: 0;
  color: #0050ca;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

#Checkout #DetailsToggle:hover,
#Checkout #DetailsToggle:focus {
  color: #003d99;
}

/* Address block — Bootstrap's floating label assumes a real <input>; the
   address is a plain span, so re-lay it out as label-above-value instead of
   the default overlapping-float behavior. */
#Checkout .payment-box .form-floating {
  position: static;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}

#Checkout .payment-box .form-floating > label {
  position: static;
  transform: none;
  opacity: 1;
  height: auto;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #56606f;
}

#Checkout .payment-box .truncate-center.form-control-plaintext {
  padding: 0;
  font-size: 15.5px;
  color: #202020;
}

#Checkout .payment-box .truncate-center .clipboard-button {
  color: #9b9b9b;
}

/* "Pay in wallet" button — brand blue instead of the store's own accent
   color (shows red on some invoices today). Delete this block if that
   button should keep following the store's Brand Color setting instead. */
#Checkout #PayInWallet {
  background-color: #0050ca !important;
  border-color: #0050ca !important;
  color: #fff !important;
}

#Checkout #PayInWallet:hover,
#Checkout #PayInWallet:focus {
  background-color: #003d99 !important;
  border-color: #003d99 !important;
}

/* Footer */
#Checkout .store-powered-by,
#Checkout #ContactLink {
  color: #9b9b9b;
  font-size: 12px;
}