:root {
  /* Core brand: dark orange */
  --btcpay-primary-100: #ffe8d7;
  --btcpay-primary-200: #ffceaa;
  --btcpay-primary-300: #ffb47c;
  --btcpay-primary-400: #ff9a4d;
  --btcpay-primary-500: #ff7f1f;
  --btcpay-primary-600: #e06600;
  --btcpay-primary-700: #b35100;
  --btcpay-primary-800: #873c00;
  --btcpay-primary-900: #5a2800;

  --btcpay-primary-rgb: 224, 102, 0;
  --btcpay-primary-accent-rgb: 255, 127, 31;

  --btcpay-primary: rgb(var(--btcpay-primary-rgb));
  --btcpay-primary-accent: rgb(var(--btcpay-primary-accent-rgb));
  --btcpay-primary-shadow: rgba(var(--btcpay-primary-rgb), 0.7);

  --btcpay-brand-primary: var(--btcpay-primary-500);

  /* Dark neutrals for backgrounds */
  --btcpay-white: #ffffff;
  --btcpay-black: #000000;

  --btcpay-neutral-100: #1d1d22;
  --btcpay-neutral-200: #24242b;
  --btcpay-neutral-300: #2b2b34;
  --btcpay-neutral-400: #33333d;
  --btcpay-neutral-500: #3c3c47;
  --btcpay-neutral-600: #454553;
  --btcpay-neutral-700: #505062;
  --btcpay-neutral-800: #5c5c70;
  --btcpay-neutral-900: #17171c;

  /* Body + surfaces */
  --btcpay-body-bg: #000000;          /* was #111015 */
  --btcpay-body-bg-light: #000000;    /* optional to keep it consistent */
  --btcpay-body-bg-medium: #201f29;
  --btcpay-body-bg-hover: rgba(var(--btcpay-primary-rgb), 0.16);
  --btcpay-body-bg-active: rgba(var(--btcpay-primary-rgb), 0.26);
  --btcpay-body-bg-striped: rgba(var(--btcpay-primary-rgb), 0.12);

  --btcpay-body-text: #f2f2f6;
  --btcpay-body-text-muted: #a0a0b3;
  --btcpay-body-text-hover: #ffffff;
  --btcpay-body-text-active: #ffffff;

  --btcpay-body-border: #2b2b35;
  --btcpay-body-border-medium: rgba(255, 255, 255, 0.12);

  --btcpay-content-bg: #18171d;
  --btcpay-section-bg: #18171d;
  --btcpay-card-bg: #201f29;
  --btcpay-surface-bg: #201f29;
  --btcpay-bg-tile: #201f29;

  /* Header / footer / nav */
  --btcpay-header-bg: #000000;
  --btcpay-footer-bg: #000000;
  --btcpay-footer-text: #f5f5f7;

  --btcpay-nav-bg: transparent;
  --btcpay-nav-bg-hover: rgba(var(--btcpay-primary-rgb), 0.08);
  --btcpay-nav-bg-active: rgba(var(--btcpay-primary-rgb), 0.2);
  --btcpay-nav-border: transparent;
  --btcpay-nav-border-hover: transparent;
  --btcpay-nav-border-active: var(--btcpay-primary);

  /* Forms and inputs */
  --btcpay-form-bg: #18171d;
  --btcpay-form-bg-disabled: #252432;
  --btcpay-form-bg-hover: #201f29;
  --btcpay-form-border: #3c3c47;
  --btcpay-form-border-hover: var(--btcpay-primary-400);
  --btcpay-form-border-active: var(--btcpay-primary-500);
  --btcpay-form-text: #f2f2f6;
  --btcpay-form-text-muted: #a0a0b3;
  --btcpay-form-placeholder: #747488;

  /* Links / actions */
  --btcpay-body-link: var(--btcpay-primary-300);
  --btcpay-body-link-hover: var(--btcpay-primary-100);

  /* Code / pre */
  --btcpay-code-text: var(--btcpay-body-text);
  --btcpay-code-bg: transparent;
  --btcpay-pre-text: var(--btcpay-white);
  --btcpay-pre-bg: #0c0b10;

  /* Bootstrap bridge */
  --bs-primary: var(--btcpay-primary);
  --bs-primary-rgb: var(--btcpay-primary-rgb);
}

/* Show and style store name */
.store-name,
.store-title,
.invoice-header__title,
.invoice-title {
  display: block !important;
  color: var(--btcpay-primary-500) !important; /* dark orange */
  font-size: 48px !important;
  font-weight: 600;
  margin-bottom: 5px;
}

.store-footer {
  background: #000000; 
}

/* Global layout: one‑screen centered invoice */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: radial-gradient(circle at top, #1f1c26 0, #0b0a0f 45%, #050509 100%);
  color: var(--btcpay-body-text);
  font-size: 13px;
}

/* Flex center the main invoice content and constrain width */
.checkout-body,
.invoice-page,
.store-checkout-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 8px;
}

/* Wrapper around invoice so everything sits in one card (no shadows) */
.invoice,
.invoice-wrapper,
.payment-box {
  width: 100%;
  max-width: 860px;
  max-height: 96vh;
  overflow: hidden;
  border-radius: 10px;
  background: var(--btcpay-card-bg);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(var(--btcpay-primary-rgb), 0.26);
}

/* Header inside invoice – slim */
.invoice-header,
.invoice__header,
.payment-header {
  padding: 4px 8px;
  border-bottom: 1px solid var(--btcpay-body-border-medium);
}

/* Content area: QR + details in responsive grid */
.invoice-body,
.invoice__body,
.payment-body {
  flex: 1;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  grid-column-gap: 10px;
  grid-row-gap: 4px;
}

/* Stack on very small viewports */
@media (max-width: 720px) {
  .invoice-body,
  .invoice__body,
  .payment-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* QR / payment details highlight – no border, no shadows */
.qr-code-container,
.invoice-body .qr,
.invoice-body .qr-container {
  background: radial-gradient(
    circle at top,
    rgba(var(--btcpay-primary-accent-rgb), 0.22),
    rgba(var(--btcpay-primary-rgb), 0.06)
  );
  border-radius: 8px;
  padding: 4px;
  border: none !important;
  box-shadow: none !important;
}

/* QR image responsive */
.qr-code-container img,
.invoice-body .qr img,
.invoice-body .qr-container img {
  max-width: 100%;
  height: auto;
}

/* Right‑side column: scroll internally if it overflows */
.invoice-body > div,
.payment-body > div {
  min-height: 0;
}

.invoice-details,
.payment-details,
.invoice-body .col,
.payment-body .col {
  max-height: 70vh;
  overflow-y: auto;
}

/* Header strip across top of page (outside invoice) */
.header-section,
.top-header,
.navbar,
.main-header {
  background: var(--btcpay-header-bg) !important;
  color: var(--btcpay-body-text);
  border-bottom: 1px solid var(--btcpay-body-border-medium);
  box-shadow: none !important;
}



/* Cards / panels – no shadows */
.card,
.invoice-card,
.payment-method-card,
.payment-box-inner,
.modal-content {
  background: var(--btcpay-card-bg) !important;
  border: 0 solid var(--btcpay-body-border);
  box-shadow: none !important;
  color: var(--btcpay-body-text);
  padding: 6px 8px;
}

/* Primary buttons – no drop shadow */
.btn-primary,
.action-button,
button[type="submit"].btn,
.payment-method-card.selected .btn {
  background: linear-gradient(
    135deg,
    var(--btcpay-primary-500),
    var(--btcpay-primary-700)
  ) !important;
  border-color: var(--btcpay-primary-600) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  padding: 4px 10px;
  font-size: 16px;
}

.btn-primary:hover,
.action-button:hover,
button[type="submit"].btn:hover {
  background: linear-gradient(
    135deg,
    var(--btcpay-primary-400),
    var(--btcpay-primary-600)
  ) !important;
  border-color: var(--btcpay-primary-500) !important;
}

/* Secondary / outline buttons */
.btn-outline-primary {
  color: var(--btcpay-primary-300) !important;
  border-color: var(--btcpay-primary-500) !important;
  padding: 4px 10px;
  font-size: 12px;
  box-shadow: none !important;
}

.btn-outline-primary:hover {
  background: rgba(var(--btcpay-primary-rgb), 0.12) !important;
  color: var(--btcpay-primary-100) !important;
}

/* Links */
a,
.link {
  color: var(--btcpay-body-link);
}

a:hover,
.link:hover {
  color: var(--btcpay-body-link-hover);
}

/* Inputs & selects – compact, no shadow */
.form-control,
input,
select,
textarea {
  background-color: var(--btcpay-form-bg) !important;
  border-color: var(--btcpay-form-border) !important;
  color: var(--btcpay-form-text) !important;
  padding: 3px 6px;
  font-size: 12px;
  box-shadow: none !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  background-color: var(--btcpay-form-bg-hover) !important;
  border-color: var(--btcpay-form-border-active) !important;
  box-shadow: none !important;
}

/* Labels, small text */
.form-text,
small,
.text-muted {
  color: var(--btcpay-form-text-muted) !important;
  font-size: 10px;
}

/* Tables */
.table,
.table-sm {
  color: var(--btcpay-body-text);
  background-color: transparent;
  margin-bottom: 4px;
}

.table th,
.table td {
  padding: 2px 4px;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--btcpay-body-bg-striped);
}

.table-hover tbody tr:hover {
  background-color: var(--btcpay-body-bg-hover);
}

/* List items */
.list-group-item {
  background-color: transparent;
  color: var(--btcpay-body-text);
  border-color: var(--btcpay-body-border);
  padding: 3px 6px;
}

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

/* Badges / pills */
.badge-primary,
.badge.bg-primary {
  background-color: var(--btcpay-primary-500) !important;
}

/* Toasts / notifications */
.toast,
.alert {
  background-color: #1a181f;
  border-color: var(--btcpay-body-border-medium);
  color: var(--btcpay-body-text);
  box-shadow: none !important;
}

/* Code blocks (e.g. addresses) */
code,
pre {
  color: var(--btcpay-code-text);
  background-color: var(--btcpay-pre-bg);
  padding: 3px 4px;
  border-radius: 3px;
  box-shadow: none !important;
}

/* Generic Bootstrap spacing utilities – globally tighter */
.mt-3,
.my-3,
.mb-3 {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

.mt-4,
.my-4,
.mb-4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.p-3,
.py-3,
.px-3 {
  padding: 3px !important;
}

.p-4,
.py-4,
.px-4 {
  padding: 4px !important;
}