/* Shared BrooPay palette for the public store, private panels and payment portal. */
:root {
  color-scheme: dark;
  --broopay-black: #050505;
  --broopay-surface: #050505;
  --broopay-field: #050505;
  --broopay-border: #393939;
  --broopay-orange: #ff6200;
  background: var(--broopay-black) !important;
  color: #fff !important;
}

html, body {
  background: var(--broopay-black) !important;
  color: #fff !important;
}

body, body * {
  color: #fff !important;
  border-color: var(--broopay-border) !important;
}

body * {
  background-color: transparent !important;
  background-image: none !important;
}

body :is(header, footer, nav, article, aside, section, form, dialog, table,
  [class*="-card"], [class*="-panel"], [class*="-summary"], [class*="-box"],
  [class*="-tile"], [class*="-row"], [class*="-item"], [class*="-modal"],
  .public-digital-product, .public-product, .store-card, details) {
  background-color: var(--broopay-surface) !important;
}

body :is(main, .halloween-spider-layer, .halloween-spider, .spider-legs,
  .public-product-visual, .pay-brand-viewport, .pay-footer-logo-viewport) {
  background-color: transparent !important;
}

body :is(input, select, textarea, option, [contenteditable="true"]) {
  background: var(--broopay-field) !important;
  color: #fff !important;
  border-color: #686868 !important;
  caret-color: #fff;
}

body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--broopay-orange); }

body :is(input, textarea)::placeholder { color: #bcbcbc !important; opacity: 1; }
body :is(input, select, textarea):focus-visible,
body :is(button, a):focus-visible { outline: 2px solid var(--broopay-orange) !important; outline-offset: 2px; }

body :is(button, input[type="button"], input[type="submit"], input[type="reset"],
  [role="button"], a[class*="button"], a[class*="cta"]) {
  background: var(--broopay-orange) !important;
  color: #fff !important;
  border-color: var(--broopay-orange) !important;
}

body :is(button, input[type="button"], input[type="submit"], input[type="reset"],
  [role="button"], a[class*="button"], a[class*="cta"]):hover:not(:disabled) {
  background: #ff7a22 !important;
  border-color: #ff7a22 !important;
}

body .public-banner-dot:not([aria-pressed="true"]) {
  background: #929292 !important;
  border-color: transparent !important;
}
body .public-banner-dot[aria-pressed="true"] {
  background: var(--broopay-orange) !important;
  border-color: transparent !important;
}

/* The selected catalog category is the white pill beneath its banner. */
body #publicCategoryFilters button.active,
body #publicCategoryFilters button.active:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--broopay-black) !important;
}

body :is(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled {
  background: #783412 !important;
  border-color: #783412 !important;
  color: #ddd !important;
}

/* Product cards are browsing surfaces, even when implemented as buttons. */
body button:is(.public-digital-product, .admin-catalog-group, .panel-product-card),
body button:is(.public-digital-product, .admin-catalog-group, .panel-product-card):disabled {
  background: var(--broopay-black) !important;
  border-color: var(--broopay-border) !important;
  color: #fff !important;
}

body button:is(.public-digital-product, .admin-catalog-group, .panel-product-card):hover:not(:disabled) {
  background: var(--broopay-black) !important;
  border-color: var(--broopay-orange) !important;
}

body :is(a, a *) { color: #fff !important; }
body a:hover { color: #ff9b58 !important; }
body :is(button, [role="button"], a[class*="button"], a[class*="cta"]) * { color: #fff !important; }

body :is(.pay-header, .header, .pay-public-footer, #publicFooter) {
  background: var(--broopay-black) !important;
}

body :is(.pay-brand-viewport img, .pay-footer-logo-viewport img,
  .pay-login-logo img, .header img, main > img) {
  filter: none !important;
}

body .halloween-spider { color: #342a38 !important; }
body .pay-login.admin-login form::before { background-color: var(--broopay-surface) !important; }
body .public-legal-page::before { mix-blend-mode: screen !important; }

/* Legal documents sit directly over the page artwork, without opaque blocks. */
body #publicApp > .public-legal-page,
body #publicApp .public-legal-page :is(header, article, aside, nav, footer, section, table, th, td) {
  background: transparent !important;
}

/* Let the artwork show through the checkout, payment choice and FAQ panels. */
body #publicApp .public-checkout-section :is(.public-checkout-details, .public-checkout-card, .public-checkout-summary),
body #publicApp .public-payment-section :is(.public-payment-methods, .public-cart-methods, .public-cart-methods label, .public-checkout-summary),
body #publicApp .public-faq-section,
body #publicApp .public-faq-section :is(.public-faq-list, details, summary) {
  background: transparent !important;
}

body :is(.public-product-visual, .public-cart-item-art, .pay-product img) {
  background: var(--broopay-black) !important;
}

body :is(hr, tr, td, th) { border-color: var(--broopay-border) !important; }
body ::selection { background: var(--broopay-orange); color: #fff; }

/* A receipt is a document: keep its original light treatment on screen and paper. */
body main.public-receipt-page {
  background: #f1f4f8 !important;
  color: #181818 !important;
}
body .public-receipt-page * {
  color: #181818 !important;
  border-color: #d8dde2 !important;
  background-color: transparent !important;
}
body .public-receipt-shell,
body .receipt-copyright,
body .receipt-loading,
body .receipt-invalid,
body .transaction-receipt,
body .receipt-product-initials { background: #fff !important; }
body .receipt-paper-area { background: #f4f6f9 !important; }
body .public-receipt-hero,
body .receipt-support { background: linear-gradient(135deg, #ff5a00, #e64800) !important; }
body .public-receipt-hero *,
body .receipt-support * { color: #fff !important; }
body .receipt-hero-title button { background: #fff !important; color: #e74b00 !important; border-color: rgba(255,255,255,.55) !important; }
body .receipt-product-initials { color: #e75300 !important; }
body .transaction-receipt-meta dt,
body .receipt-copyright { color: #666 !important; }
body .receipt-customer,
body .receipt-lines { border-color: #252525 !important; }
body .receipt-thanks span { border-color: #222 !important; }
body .receipt-hero-data,
body .receipt-hero-total,
body .receipt-hero-product { border-color: rgba(255,255,255,.32) !important; }
body .receipt-support a,
body .receipt-support a * { color: #fff !important; }
@media print {
  html, body, body main.public-receipt-page,
  body .public-receipt-shell, body .receipt-paper-area,
  body .transaction-receipt { background: #fff !important; color: #181818 !important; box-shadow: none !important; }
}