/* Monero Merchant theme for BTCPay Server
 * Loaded AFTER bootstrap.css, layout.css, site.css, default.css, default-dark.css
 * and AFTER the inline <style> block that sets --btcpay-primary.
 *
 * Goal: light, orange-accent look consistent with moneromerchant.com
 * without breaking POS/cart layout.
 */

/* BRAND + BASE TOKENS
   -------------------------------------------------- */

:root {
  /* Map MoneroMerchant palette */
  --mm-orange: #f36c21;
  --mm-orange-dark: #e65f12;
  --mm-white: #ffffff;
  --mm-text: #1a1a1a;
  --mm-muted: #555555;

  /* BTCPay brand colors -> MoneroMerchant orange */
  --btcpay-brand-primary: var(--mm-orange);
  --btcpay-brand-secondary: #ffe3d1;      /* soft orange tint, used sparingly */
  --btcpay-brand-tertiary: var(--mm-orange-dark);
  --btcpay-brand-dark: #181818;

  /* Primary (buttons, accents, links) */
  --btcpay-primary: var(--btcpay-brand-primary);
  --btcpay-primary-rgb: 243, 108, 33;
  --btcpay-primary-accent: var(--btcpay-brand-tertiary);
  --btcpay-primary-text: var(--mm-white);
  --btcpay-primary-text-hover: var(--mm-white);
  --btcpay-primary-text-active: var(--mm-white);
  --btcpay-primary-bg-hover: var(--mm-orange-dark);
  --btcpay-primary-bg-active: #cf4f0a;
  --btcpay-primary-border: var(--btcpay-primary);
  --btcpay-primary-border-hover: var(--btcpay-primary-bg-hover);
  --btcpay-primary-border-active: var(--btcpay-primary-bg-active);
  --btcpay-primary-shadow: rgba(243, 108, 33, 0.5);

  /* Body + text */
  --btcpay-body-bg: #ffffff;
  --btcpay-body-bg-rgb: 255, 255, 255;
  --btcpay-body-bg-light: #ffffff;
  --btcpay-body-bg-medium: #f7f7f7;
  --btcpay-body-bg-striped: #f3f3f3;
  --btcpay-body-bg-hover: #ffffff;

  --btcpay-body-text: var(--mm-text);
  --btcpay-body-text-rgb: 26, 26, 26;
  --btcpay-body-text-muted: var(--mm-muted);

  /* Links */
  --btcpay-body-link: var(--btcpay-primary);
  --btcpay-body-link-rgb: var(--btcpay-primary-rgb);
  --btcpay-body-link-accent: var(--btcpay-primary-accent);
  --btcpay-body-link-accent-rgb: 230, 95, 18;

  /* Tiles / cards */
  --btcpay-bg-tile: #f7f7f7;
  --btcpay-body-border-light: #e5e5e5;
  --btcpay-body-border-medium: #dadada;
  --btcpay-body-shadow: rgba(0, 0, 0, 0.08);

  /* Header / nav / footer:
   * Keep header light like moneromerchant.com; footer can be solid orange.
   */
  --btcpay-header-bg: #ffffff;
  --btcpay-header-text: var(--mm-text);
  --btcpay-header-link: var(--btcpay-header-text);
  --btcpay-header-link-accent: var(--btcpay-primary);
  --btcpay-header-link-active: var(--btcpay-primary);

  --btcpay-nav-link: #444444;
  --btcpay-nav-link-accent: #222222;
  --btcpay-nav-link-active: var(--btcpay-primary);
  --btcpay-nav-bg: transparent;
  --btcpay-nav-bg-hover: transparent;
  --btcpay-nav-bg-active: transparent;
  --btcpay-nav-border: transparent;
  --btcpay-nav-border-hover: transparent;
  --btcpay-nav-border-active: var(--btcpay-primary);

  --btcpay-footer-bg: var(--mm-orange);
  --btcpay-footer-text: var(--mm-white);
  --btcpay-footer-link: var(--mm-white);
  --btcpay-footer-link-accent: var(--mm-white);

  /* Forms – keep light, soft borders like moneromerchant.com */
  --btcpay-form-bg: #ffffff;
  --btcpay-form-bg-hover: #ffffff;
  --btcpay-form-bg-addon: #f0f0f0;
  --btcpay-form-bg-disabled: #f0f0f0;
  --btcpay-form-text: var(--mm-text);
  --btcpay-form-text-label: #333333;
  --btcpay-form-text-addon: #555555;
  --btcpay-form-border: #d9d9d9;
  --btcpay-form-border-check: #cccccc;
  --btcpay-form-border-hover: var(--btcpay-primary);
  --btcpay-form-border-focus: var(--btcpay-primary);
  --btcpay-form-border-active: var(--btcpay-form-border);
  --btcpay-form-border-disabled: var(--btcpay-form-border);
  --btcpay-form-shadow-size: 2px;
  --btcpay-form-shadow-focus: var(--btcpay-primary-shadow);

  /* Do NOT touch success/info/warning/danger palette
     so BTCPay semantics stay as upstream. */
}

/* TYPOGRAPHY + GLOBALS
   -------------------------------------------------- */

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
    "Helvetica Neue", Arial, sans-serif;
  background-color: var(--btcpay-body-bg);
  color: var(--btcpay-body-text);
}

/* Slightly tighter headings, similar to landing page hero/text */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}

/* LINKS (non-button)
   -------------------------------------------------- */

a:not(.btn) {
  color: var(--btcpay-body-link);
  text-decoration: none;
}

a:not(.btn):hover,
a:not(.btn):focus {
  color: var(--btcpay-body-link-accent);
  text-decoration: underline;
}

/* BUTTONS
   -------------------------------------------------- */

.btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 999px;
  font-weight: 600;
}

/* Primary buttons: orange pill-style */
.btn-primary,
.btn-success {
  background-color: var(--btcpay-primary);
  border-color: var(--btcpay-primary-border);
  color: var(--btcpay-primary-text);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background-color: var(--btcpay-primary-bg-hover);
  border-color: var(--btcpay-primary-border-hover);
  color: var(--btcpay-primary-text-hover);
}

.btn-primary:active,
.btn-success:active {
  background-color: var(--btcpay-primary-bg-active) !important;
  border-color: var(--btcpay-primary-border-active) !important;
}

/* Outline primary: white background, orange border */
.btn-outline-primary {
  color: var(--btcpay-primary);
  border-color: var(--btcpay-primary);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--btcpay-primary);
  color: var(--btcpay-primary-text);
}

/* BADGES / LABELS / UTILITIES
   -------------------------------------------------- */

.badge-primary,
.bg-primary,
.label-primary {
  background-color: var(--btcpay-primary) !important;
  color: #ffffff !important;
}

.text-primary {
  color: var(--btcpay-primary) !important;
}

/* CARDS, LISTS, TABLES (POS heavily uses these)
   -------------------------------------------------- */

.card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.list-group-item {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
}

.table {
  background-color: #ffffff;
}

/* POS CART / SHOP – generic selectors that align with the card style.
   Won’t break if classes differ, they just won’t apply. */
.pos,
.pos-app,
.pos-cart {
  background-color: #ffffff;
}

.pos .card,
.pos-app .card {
  border-radius: 18px;
}

/* Make POS “Add to cart / Pay” actions look like MoneroMerchant CTA buttons */
.pos .btn-primary,
.pos-app .btn-primary,
.pos-cart .btn-primary {
  padding-inline: 20px;
  border-radius: 999px;
}

/* NAVBAR / TOP BAR
   -------------------------------------------------- */

.navbar,
.btcpay-header {
  background-color: #ffffff;

/* === POS-SHOP OVERRIDES SCOPED TO THIS INSTANCE === */

html#POS-3kAZMtHLKibRWUK4YVWY3ELnobL7 .quantities .btn {
  background-color: var(--btcpay-primary) !important;
  border-color: var(--btcpay-primary-border) !important;
  color: var(--btcpay-primary-text) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

html#POS-3kAZMtHLKibRWUK4YVWY3ELnobL7 .quantities .btn:hover,
html#POS-3kAZMtHLKibRWUK4YVWY3ELnobL7 .quantities .btn:focus {
  background-color: var(--btcpay-primary-bg-hover) !important;
  border-color: var(--btcpay-primary-border-hover) !important;
  color: var(--btcpay-primary-text-hover) !important;
}

/* .mb-0 text orange inside this POS */
html#POS-3kAZMtHLKibRWUK4YVWY3ELnobL7 .mb-0 {
  color: var(--btcpay-primary) !important;
}

/* Force product tiles to 400×400 in this POS */
html#POS-3kAZMtHLKibRWUK4YVWY3ELnobL7 .tile.card {
  width: 400px !important;
  height: 400px !important;
  max-width: 400px !important;
  max-height: 400px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}

/* Product images inside tiles */
html#POS-3kAZMtHLKibRWUK4YVWY3ELnobL7 .tile.card img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}