/* Scoped to avoid changing the website's existing theme/header styles. */
#mtbf-banner, #mtbf-banner * { box-sizing: border-box; }
#mtbf-banner { position:relative; z-index:100; isolation:isolate; width:100%; min-height:96px; margin:0; padding:0; background:#110a13 url('texture.png') center 46%/cover no-repeat; border-top:2px solid #ff0067; font-family:Arial,Helvetica,sans-serif; color:#fff; }
#mtbf-banner[hidden], html.mtbf-dismissed #mtbf-banner { display:none!important; }
#mtbf-banner .mtbf-inner { max-width:1360px; margin:0 auto; min-height:96px; padding:8px 56px 8px 24px; display:grid; grid-template-columns:minmax(310px,430px) minmax(258px,300px) minmax(220px,290px); justify-content:space-between; align-items:center; gap:clamp(14px,2vw,34px); position:relative; }
#mtbf-banner .mtbf-artwork { display:block; line-height:0; }
#mtbf-banner .mtbf-artwork img { width:100%; max-width:430px; height:auto; max-height:84px; object-fit:contain; display:block; }
#mtbf-banner .mtbf-clock { display:flex; align-items:center; justify-content:center; gap:7px; }
#mtbf-banner .mtbf-time { display:flex; flex-direction:column; align-items:center; justify-content:center; background:#ff0067; min-width:56px; min-height:58px; padding:5px 5px 4px; border-radius:13px; color:#fff; line-height:1; }
#mtbf-banner .mtbf-time strong { display:block; margin:0 0 4px; font:bold 29px/1 Arial,Helvetica,sans-serif; color:#fff; }
#mtbf-banner .mtbf-time span { display:block; color:#fff; font:600 12px/1 Arial,Helvetica,sans-serif; }
#mtbf-banner .mtbf-actions { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:7px; }
#mtbf-banner .mtbf-cta { display:flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:0; border-radius:14px; background:#ff0067; text-align:center; text-decoration:none!important; color:#fff!important; font:bold 15px/1.1 Arial,Helvetica,sans-serif; }
#mtbf-banner .mtbf-cta:hover, #mtbf-banner .mtbf-cta:focus { background:#df005a; }
#mtbf-banner .mtbf-secondary { display:block; width:100%; min-height:21px; margin:0; padding:0; background:transparent!important; border:0!important; box-shadow:none!important; color:#aeb0ba!important; text-align:center; cursor:pointer; font:13px/1.3 Arial,Helvetica,sans-serif; text-transform:none; }
#mtbf-banner .mtbf-secondary:hover { text-decoration:underline; }
#mtbf-banner .mtbf-x { position:absolute; right:12px; top:12px; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:#fff!important; color:#686868!important; cursor:pointer; display:flex; align-items:center; justify-content:center; font:700 23px/1 Arial,Helvetica,sans-serif; }
#mtbf-banner button:focus-visible, #mtbf-banner a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media(max-width:1080px) { #mtbf-banner .mtbf-inner { grid-template-columns:minmax(250px,370px) minmax(230px,290px) minmax(175px,240px); padding:10px 48px 10px 16px; gap:12px; } #mtbf-banner .mtbf-artwork img { max-height:72px; } #mtbf-banner .mtbf-time { min-width:51px; } #mtbf-banner .mtbf-time strong { font-size:25px; } }
@media(max-width:820px) { #mtbf-banner .mtbf-inner { grid-template-columns:minmax(160px,1fr) auto; gap:10px 16px; padding:9px 44px 10px 16px; } #mtbf-banner .mtbf-artwork { grid-column:1; grid-row:1; } #mtbf-banner .mtbf-artwork img { max-height:64px; } #mtbf-banner .mtbf-clock { grid-column:2; grid-row:1; } #mtbf-banner .mtbf-actions { grid-column:1/-1; grid-row:2; flex-direction:row; align-items:center; justify-content:center; } #mtbf-banner .mtbf-cta { min-height:36px; min-width:190px; } #mtbf-banner .mtbf-secondary { width:auto; } }
@media(max-width:680px) {
  #mtbf-banner .mtbf-inner { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"art art" "clock cta" "skip skip"; align-items:center; padding:8px 12px 8px; gap:6px 10px; }
  #mtbf-banner .mtbf-artwork { grid-area:art; justify-self:center; }
  #mtbf-banner .mtbf-artwork img { width:min(170px,48vw); max-height:72px; }
  #mtbf-banner .mtbf-clock { grid-area:clock; gap:4px; }
  #mtbf-banner .mtbf-time { min-width:40px; min-height:42px; padding:4px 3px 3px; border-radius:8px; }
  #mtbf-banner .mtbf-time strong { font-size:18px; margin-bottom:3px; }
  #mtbf-banner .mtbf-time span { font-size:9px; }
  #mtbf-banner .mtbf-actions { display:contents; }
  #mtbf-banner .mtbf-cta { grid-area:cta; width:100%; min-height:42px; padding:8px 10px; border-radius:10px; font-size:14px; }
  #mtbf-banner .mtbf-secondary { grid-area:skip; font-size:12px; min-height:18px; }
  #mtbf-banner .mtbf-x { right:8px; top:8px; width:26px; height:26px; font-size:20px; }
}
