/* iframe-white-background.css
   Targets BTCPay POS membership picker markup you pasted.
   Goals: white page, navy tiles with white text, no 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;
}

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

/* Outer wrapper stays white */
.public-page-wrap,
main{
  background: var(--page-bg) !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: #111827 !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;
}

/* 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; /* keeps image corners clean */
}

/* 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 (Bootstrap sometimes makes it grey/white) */
#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;
}