/* BMSDock UI 1.9.12 — Donate UI (approved visual, panel shell externalized) */
:root{
  
  --donate-text-size:var(--ui-font-body);
  
  --donate-text-weight:var(--ui-weight-regular);
  
  --donate-text-color:#0f172a;
  --donate-muted-color:var(--ui-color-subtle);
  --donate-value-color:var(--ui-color-muted);
  --donate-border:var(--ui-color-border);
  --donate-control-bg:var(--ui-color-surface-soft);
  
  --donate-control-radius:var(--ui-radius-control);
  --donate-card-radius:22px;
  --donate-row-gap:10px;
}

#donateModal .donate-card{
box-sizing:border-box;
  --donate-block-width:118px;
  --donate-space:20px;
  display:grid;
  grid-template-columns:var(--donate-space) var(--donate-block-width) var(--donate-space) var(--donate-block-width) var(--donate-space);
  grid-template-rows:auto auto auto auto auto auto;
  width:298px;
  max-width:calc(100vw - 24px);
  padding:24px 0 var(--donate-space);
  border-radius:var(--donate-card-radius);
  color:var(--donate-text-color);
}

#donateModal .donate-close{
  position:absolute;
  top:12px;
  right:12px;
}

#donateModal .donate-logo-img{
display:block;
  grid-column:2 / 5;
  grid-row:1;
  justify-self:center;
  width:100%;
  max-width:240px;
  height:auto;
  margin:2px auto 12px;
  background:transparent;
}

#donateModal .donate-text{
grid-column:2 / 5;
  grid-row:2;
  width:100%;
  margin:0 0 10px;
  color:var(--donate-muted-color);
  font-size:var(--donate-text-size);
  font-weight:var(--ui-weight-bold);
  line-height:1.4;
  text-align:center;
}



#donateModal .donate-qr-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}


#donateModal .donate-qr-action{
  -webkit-appearance:none;
  appearance:none;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

#donateModal .donate-qr-action:focus-visible{
  outline:2px solid rgba(37,99,235,.28);
  outline-offset:3px;
  border-radius:var(--donate-control-radius);
}

#donateModal .donate-qr-item canvas{
display:block !important;
  width:104px !important;
  height:104px !important;
  margin:0 auto !important;
  background:var(--ui-color-surface) !important;
  padding:6px !important;
  border:1px solid var(--donate-border);
  border-radius:var(--donate-control-radius) !important;
  box-sizing:content-box !important;
}
#donateModal .donate-qr-item img{
  display:none !important;
}


#donateModal .donate-divider{
grid-column:2 / 5;
  grid-row:4;
  width:100%;
  height:1px;
  margin:16px 0 10px;
  background:var(--donate-border);
}

#donateModal .donate-contact-title{
grid-column:2 / 5;
  grid-row:5;
  width:100%;
  margin:0 0 10px;
  font-size:var(--donate-text-size);
  line-height:1.4;
  font-weight:var(--donate-text-weight);
  color:var(--donate-muted-color);
  text-align:center;
}



@media (max-width:420px){
  #donateModal .donate-card{
--donate-block-width:110px;
  --donate-space:18px;
  width:276px;
  max-width:calc(100vw - 24px);
  padding:22px 0 var(--donate-space);
}
  #donateModal .donate-logo-img{
max-width:220px;
}
  #donateModal .donate-qr-item canvas{
    width:96px !important;
    height:96px !important;
  }
}

/* UI 1.9.33 — QR/Button Pairing.
   QR and its destination button are one component; no duplicate text label. */


#donateModal .donate-methods{
display:contents;
  margin:0;
}

#donateModal .donate-contact-actions{
display:contents;
  margin:0;
}

#donateModal .donate-method{
display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  gap:10px;
  margin:0;
}



/* UI 1.9.34 — Donate Visual Standardization + Button Geometry Fix.
   One geometry contract for all Donate actions. */



/* Shared 42px button box. */

/* UI 1.9.38 — one spatial grid for the entire Donate composition.
   Columns 1/3/5 are equal free-space tracks.
   Bottom spacer uses the width of column 1, so bottom inset equals side inset. */

#donateModal .donate-method:first-child{
grid-column:2;
  grid-row:3;
}

#donateModal .donate-method:last-child{
grid-column:4;
  grid-row:3;
}



#donateModal #donateTelegramBtn{
  grid-column:2;
  grid-row:6;
}

#donateModal #donateEmailBtn{
  grid-column:4;
  grid-row:6;
}

#donateModal .donate-method-btn, #donateModal .donate-contact-actions > button{
box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  max-width:none;
  height:42px;
  min-height:42px;
  max-height:42px;
  margin:0;
  padding:0 12px;
  gap:6px;
  border:1px solid var(--donate-border);
  border-radius:var(--donate-control-radius);
  font-family:inherit;
  font-size:var(--donate-text-size);
  font-weight:var(--ui-weight-bold);
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:none;
  overflow:hidden;
  transition:filter .14s ease,transform .1s ease,border-color .14s ease,background-color .14s ease;
}

/* Hard cap: intrinsic SVG size can never expand the button. */
#donateModal .donate-method-btn > .small-action-icon,
#donateModal .donate-contact-actions > button > .small-action-icon{
  display:block !important;
  width:20px !important;
  min-width:20px !important;
  max-width:20px !important;
  height:20px !important;
  min-height:20px !important;
  max-height:20px !important;
  flex:0 0 20px !important;
  object-fit:contain !important;
}

/* Brand fills. */
#donateModal #donateSbpBtn{
  background:#ffdd2d;
  border-color:#ffdd2d;
  color:#111827;
}

#donateModal #donateBoostyBtn{
  background:#f15a24;
  border-color:#f15a24;
  color:#ffffff;
}

/* Contacts remain white but use exactly the same grid width/height. */
#donateModal #donateTelegramBtn,
#donateModal #donateEmailBtn{
  background:#ffffff;
  border-color:var(--donate-border);
  color:#111827;
}

#donateModal .donate-method-btn:hover,
#donateModal .donate-contact-actions > button:hover{
  filter:brightness(.97);
}

#donateModal .donate-method-btn:active,
#donateModal .donate-contact-actions > button:active{
  transform:translateY(1px);
}

#donateModal .donate-method-btn:focus-visible,
#donateModal .donate-contact-actions > button:focus-visible{
  outline:2px solid rgba(37,99,235,.28);
  outline-offset:2px;
}

@media (max-width:420px){
  #donateModal .donate-method-btn, #donateModal .donate-contact-actions > button{
padding-left:10px;
  padding-right:10px;
}
}