/* iframe-white-background.css
   Updated to:
   - keep white page background
   - keep POS membership tiles navy with white text
   - force Bitcoin/sats price orange
   - prevent white-on-white text on invoice/checkout screens
   - remove ugly blue link hovers
*/

:root{
  --page-bg:#ffffff;

  --navy:#0b1f3a;
  --navy-hover:#0a1a31;

  --tile-text:#ffffff;
  --tile-muted:rgba(255,255,255,.82);

  --link:#111827;
  --focus:#9ca3af;

  --btc-orange:#f7931a;
  --text-main:#111827;
  --text-muted:#4b5563;

  /* BTCPay overrides */
  --btcpay-primary: var(--btc-orange);
  --btcpay-primary-rgb: 247,147,26;
  --btcpay-primary-bg-hover: #de8216;
  --btcpay-primary-bg-active: #c97312;
  --btcpay-primary-shadow: var(--btc-orange);
  --btcpay-body-text: var(--text-main);
  --btcpay-body-text-muted: var(--text-muted);
  --btcpay-primary-text: #111111;
  --btcpay-primary-text-hover: #111111;
  --btcpay-primary-text-active: #111111;
}

/* Page background */
html, body{
  background: var(--page-bg) !important;
  color: var(--text-main) !important;
}

/* Outer wrapper stays white */
.public-page-wrap,
main,
.tile,
.checkout-text,
#Checkout,
#payment,
#result,
#PaymentInfo,
.payment-details,
.info{
  background: var(--page-bg) !important;
  color: var(--text-main) !important;
}

/* Remove the light-blue wash / borders if they appear */
#PosStatic,
#PosItems{
  background: var(--page-bg) !important;
}

/* Header/footer keep normal readable text */
.store-header,
.store-footer,
.store-name,
.lead{
  background: transparent !important;
  color: var(--text-main) !important;
}

/* General readable text on checkout/invoice */
h1, h2, h3, h4, h5, h6,
p, span, div, dt, dd, label,
.fw-semibold,
.text-break{
  color: inherit;
}

/* Muted text should stay readable, not white */
.text-muted,
.payment-details .text-muted,
.checkout-text .text-muted,
.info .text-muted{
  color: var(--text-muted) !important;
}

/* Links: no blue hover wash */
a, a:visited{
  color: var(--link) !important;
  background: transparent !important;
  text-decoration: none !important;
}
a:hover, a:focus, a:active{
  color: var(--link) !important;
  background: transparent !important;
  text-decoration: underline !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Payment method pills/links remain readable */
.btcpay-pill,
.payment-method,
.payment-details-button,
#DetailsToggle{
  color: var(--text-main) !important;
}

/* Force Bitcoin price orange */
#AmountDue,
#PaymentDetails-AmountDue dd,
#PaymentDetails-AmountPaid dd,
#PaymentDetails-TotalPrice dd,
#total_fiat{
  color: var(--btc-orange) !important;
}

/* Exchange/rate rows readable */
#PaymentDetails-ExchangeRate dd,
#PaymentDetails-NetworkCost dd,
#PaymentDetails-RecommendedFee dd,
#PaymentDetails-TaxIncluded dd{
  color: var(--text-main) !important;
}

/* Prevent white-on-white on buttons/links generated by theme */
.btn,
.btn-link,
button{
  color: var(--text-main) !important;
}

/* Primary buttons use orange but readable text */
.btn.btn-primary{
  background: var(--btc-orange) !important;
  border-color: var(--btc-orange) !important;
  color: #111111 !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active{
  background: #de8216 !important;
  border-color: #de8216 !important;
  color: #111111 !important;
}

/* Secondary buttons stay readable */
.btn.btn-secondary{
  color: var(--text-main) !important;
}

/* Membership tiles */
#PosItems .posItem .tile.card{
  background: var(--navy) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
  overflow: hidden;
}

/* Tile hover (subtle) */
#PosItems .posItem .tile.card:hover{
  background: var(--navy-hover) !important;
  transform: translateY(-1px);
}

/* All text inside tiles white */
#PosItems .posItem .tile.card,
#PosItems .posItem .tile.card .card-body,
#PosItems .posItem .tile.card .card-footer,
#PosItems .posItem .tile.card .card-title,
#PosItems .posItem .tile.card .card-text,
#PosItems .posItem .tile.card .fw-semibold{
  color: var(--tile-text) !important;
}

/* Muted text inside tiles */
#PosItems .posItem .tile.card .card-text{
  color: var(--tile-muted) !important;
}

/* Card footer should match tile */
#PosItems .posItem .tile.card .card-footer{
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

/* Select button: white button on navy card */
#PosItems .posItem .tile.card .btn.btn-primary{
  background: #ffffff !important;
  color: var(--navy) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

/* Button hover/focus without blue tint */
#PosItems .posItem .tile.card .btn.btn-primary:hover{
  background: #f3f4f6 !important;
  color: var(--navy) !important;
}
#PosItems .posItem .tile.card .btn.btn-primary:focus{
  box-shadow: 0 0 0 3px rgba(156,163,175,.35) !important;
}

/* Optional: make images a bit more card-like */
#PosItems .posItem .tile.card .card-img-top{
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

/* Neutral focus ring globally */
:focus{
  outline-color: var(--focus) !important;
}

/* Language selector / footer controls readable */
select,
.form-select{
  background-color: #ffffff !important;
  color: var(--text-main) !important;
  border-color: #d1d5db !important;
}