/* Sunpot — checkout theme for BTCPay Server (pay.sunpot.co).
   Served from https://sunpot.co/btcpay-checkout.css and set as the store's cssUrl.
   Design tokens mirror sunpot-index-v2.html; the site has a single light look, so the
   dark theme is overridden to the same palette. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Golos+Text:wght@400;500;600;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

html:root,
html:root[data-btcpay-theme="dark"],
html:root[data-btcpay-theme="light"] {
  --sp-bg: #EFE8DB;
  --sp-panel: #F7F2E9;
  --sp-ink: #121110;
  --sp-muted: #5F5B55;
  --sp-sun: #E07A3F;
  --sp-sun-dark: #C4632C;
  --sp-line: #D9CFBF;

  color-scheme: light;
  --btcpay-body-bg: var(--sp-bg);
  --btcpay-body-bg-light: var(--sp-panel);
  --btcpay-body-bg-medium: var(--sp-panel);
  --btcpay-body-bg-hover: #EAE2D3;
  --btcpay-body-bg-active: #E4DBCA;
  --btcpay-bg-tile: var(--sp-panel);
  --btcpay-body-text: var(--sp-ink);
  --btcpay-body-text-hover: var(--sp-ink);
  --btcpay-body-text-active: var(--sp-ink);
  --btcpay-body-text-muted: var(--sp-muted);
  --btcpay-body-text-rgb: 18, 17, 16;
  --btcpay-body-bg-rgb: 239, 232, 219;
  --btcpay-form-text-addon: var(--sp-muted);
  --btcpay-form-text-label: var(--sp-muted);
  --btcpay-body-border-light: var(--sp-line);
  --btcpay-light: var(--sp-panel);
  --btcpay-light-border: var(--sp-line);
  --btcpay-light-text: var(--sp-ink);
  --btcpay-neutral-100: #EAE2D3;
  --btcpay-neutral-200: var(--sp-line);
  --btcpay-font-family-base: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
  --btcpay-font-family-monospace: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --btcpay-border-radius: 14px;
  --btcpay-border-radius-l: 18px;
  --btcpay-border-radius-xl: 22px;
}

body {
  background: var(--sp-bg);
  color: var(--sp-ink);
  font-family: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Wordmark: "SUN" + terracotta "POT", same as .brand-word on the site */
.store-header .store-name {
  font-size: 0;
  letter-spacing: .02em;
  margin-bottom: .25rem;
}
.store-header .store-name::before,
.store-header .store-name::after {
  font-family: 'Unbounded', 'Golos Text', sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
}
.store-header .store-name::before { content: "SUN"; color: var(--sp-ink); }
.store-header .store-name::after  { content: "POT"; color: var(--sp-sun); }

main.tile {
  background: var(--sp-panel);
  border: 1px solid var(--sp-line);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(18, 17, 16, .06);
}

#AmountDue,
.tile h2,
.tile h4 {
  font-family: 'Unbounded', 'Golos Text', sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sp-ink);
}

.btn-primary {
  background: var(--sp-sun-dark);
  border-color: var(--sp-sun-dark);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--sp-ink);
  border-color: var(--sp-ink);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  border: 2px solid var(--sp-ink);
  color: var(--sp-ink);
  font-weight: 600;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--sp-ink);
  color: var(--sp-bg);
}

.payment-details-button,
#DetailsToggle,
.btn-link,
#ContactLink { color: var(--sp-sun-dark); }

.btcpay-pill.payment-method {
  border: 1px solid var(--sp-line);
  background: var(--sp-bg);
  color: var(--sp-ink);
  font-weight: 600;
}
.btcpay-pill.payment-method.active {
  background: var(--sp-ink);
  border-color: var(--sp-ink);
  color: var(--sp-bg);
}

#PaymentDetails dt,
.info .timer,
.expiryTime,
main.tile label,
main.tile dt { color: var(--sp-muted); }

/* Long localized labels (e.g. RU) squeezed invoice IDs into one letter per line:
   let the value wrap onto its own line as a whole instead. */
main.tile dl > div {
  flex-wrap: wrap;
  column-gap: 1rem;
}
main.tile dl > div > dt { flex: 1 1 auto; }
main.tile dl > div > dd {
  margin-left: auto;
  white-space: nowrap;
  color: var(--sp-ink);
}

.form-select,
.form-control,
.input-group .form-control {
  background-color: var(--sp-bg);
  border-color: var(--sp-line);
  color: var(--sp-ink);
}

.qr-container,
#Checkout .qr-container {
  background: #fff;
  border-radius: 14px;
  padding: 10px;
}

/* "Back to Sunpot": the store supportUrl points to https://sunpot.co/, so BTCPay renders
   #ContactLink ("Contact us") on every checkout screen, including an active payment.
   Relabel it and make it look like a secondary button. */
.store-footer #ContactLink {
  display: inline-block;
  font-size: 0;
  text-decoration: none;
  border: 2px solid var(--sp-ink);
  border-radius: 999px;
  padding: 9px 20px;
  margin-bottom: 1.25rem !important;
  color: var(--sp-ink);
  transition: background .2s, color .2s;
}
.store-footer #ContactLink::before {
  content: "← Back to Sunpot";
  font-size: 14px;
  font-weight: 600;
}
html:lang(ru) .store-footer #ContactLink::before { content: "← Вернуться в Sunpot"; }
.store-footer #ContactLink:hover,
.store-footer #ContactLink:focus {
  background: var(--sp-ink);
  color: var(--sp-bg);
}

.store-footer,
.store-footer .store-powered-by { color: var(--sp-muted); }

/* Footer attribution: "Powered by BTCPay" (checkout + POS storefront) → "Powered by SunpotPay".
   The original text is localized, so it is hidden rather than matched; the link is disabled
   because it points to btcpayserver.org. BTCPay is MIT-licensed: the UI credit is not required. */
.store-footer .store-powered-by {
  font-size: 0;
  gap: 5px;
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
.store-footer .store-powered-by svg { display: none; }
.store-footer .store-powered-by::before {
  content: "Powered by ";
  font-size: 13px;
  color: var(--sp-muted);
}
.store-footer .store-powered-by::after {
  content: "SunpotPay";
  font-family: 'Unbounded', 'Golos Text', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--sp-ink);
}

/* POS store: navigation back to sunpot.co (rendered from the app description) */
.lead:has(> .sp-nav) { margin: 0 auto 28px; width: 100%; max-width: none; display: flex; justify-content: center; }
.sp-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
}
.sp-nav a {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sp-ink);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--sp-ink);
  text-decoration: none;
  background: transparent;
  transition: background .15s, color .15s;
}
.sp-nav a:hover,
.sp-nav a:focus-visible { background: var(--sp-ink); color: #fff; }
.sp-nav a:first-child { background: var(--sp-ink); color: #fff; }
.sp-nav a:first-child:hover { background: var(--sp-sun-dark); border-color: var(--sp-sun-dark); }


/* 23.09: на телефоне ряд товаров POS (.row с отрицательными полями -12px) лежит прямо в <main>
   без боковых отступов и вылезает за экран на 12px с каждой стороны — страница едет вбок.
   Даём контейнеру ровно те же 12px, отступы между карточками (g-4) не трогаем. */
@media (max-width: 575.98px) {
  main:has(> .row.row-cols) { padding-left: 12px; padding-right: 12px; }
}

/* 24.09: предупреждение под QR — какой именно токен и сеть ждём.
   Повод: покупатель отсканировал QR в Ledger Live, кошелёк взял из ссылки только адрес
   и отправил нативную монету POL вместо USDC (tx 0x98aa63a9…). Ссылка EIP-681 помогает
   только кошелькам, которые её понимают; остальным нужен текст.
   Привязка — по адресу контракта внутри data-qr-value, поэтому текст всегда соответствует
   выбранной вкладке. */
.qr-container[data-qr-value] { flex-wrap: wrap; }
.qr-container[data-qr-value]::after {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  order: 99;
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #F8E1DE;
  color: #8E2B24;
  font: 600 12.5px/1.35 'Golos Text', system-ui, sans-serif;
  text-align: center;
  white-space: normal;
  content: "Send the exact token shown above, on the network shown above.";
}
.qr-container[data-qr-value*="0x3c499c542cef5e3811e1192ce70d8cc03d5c3359@137"]::after {
  content: "Send only USDC on the Polygon network. Do not send POL — it will not be counted.";
}
.qr-container[data-qr-value*="0xc2132d05d31c914a87c6611c10748aeb04b58e8f@137"]::after {
  content: "Send only USDT on the Polygon network. Do not send POL — it will not be counted.";
}
.qr-container[data-qr-value*="0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48@1"]::after {
  content: "Send only USDC on the Ethereum network. Do not send ETH — it will not be counted.";
}
.qr-container[data-qr-value*="0xdac17f958d2ee523a2206206994597c13d831ec7@1"]::after {
  content: "Send only USDT on the Ethereum network. Do not send ETH — it will not be counted.";
}
.qr-container[data-qr-value*="c195_tTR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t"]::after {
  content: "Send only USDT (TRC-20) on the Tron network. Do not send TRX — it will not be counted.";
}
.qr-container[data-qr-value^="bitcoin:"]::after { content: none; }